Jquery-mobile-jqm-controlgroup-pre-rendered-markup
提供:Dev Guides
Controlgroup事前レンダリングマークアップ
説明
_pre-rendered_属性を使用して、コントロールグループの起動時間を節約できます。
例
次の例では、jQuery Mobileフレームワークで事前にレンダリングされた_controlgroupマークアップの使用について説明します。
<!DOCTYPE html>
<html>
<head>
<title>Controlgroup Pre-rendered Markup</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<h2>Pre-rendered Controlgroup</h2>
<div data-role = "controlgroup" data-enhanced = "true"
class = "ui-controlgroup-controls ui-controlgroup-vertical ui-corner-all">
<label for = "pre-rendered1">Checkbox 1</label>
<input type = "checkbox" id = "pre-rendered1" value = "val1"/>
<label for = "pre-rendered2">Checkbox 2</label>
<input type = "checkbox" id = "pre-rendered2" value = "val2"/>
</div>
</body>
</html>
出力
上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-
- 上記のhtmlコードを jqm_controlgroup_pre-rendered_markupl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp://localhost/jqm_controlgroup_pre-rendered_markuplとして開くと、次の出力が表示されます。