controlgroup
data-role=”controlgroup”を指定した要素は内側のボタンやチェックボックス、ラジオボタンなどをグルーピングして表示することが可能です。
<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>このようにするとボタンが縦に並んだリストとして表示されます。
ボタンにdata-inline=”true”を指定していてる場合は横に並んだボタンのリストになります。
<div data-role="controlgroup">
<a href="index.html" data-inline="true" data-role="button">Yes</a>
<a href="index.html" data-inline="true" data-role="button">No</a>
<a href="index.html" data-inline="true" data-role="button">Maybe</a>
</div>ラジオボタンなどはfieldset要素はdata-role=”controlgroup”をつけラベルをlegend要素に記述します。
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>data-theme属性
jQuery 1.4.0よりdata-theme属性を利用してテーマを指定することが可能になりました。
<div data-role="controlgroup" data-theme="b">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>jQuery Mobile 1.4.0よりdata-theme属性によるテーマの設定が可能になりました。
参考URL
jQuery Mobile Docs - Radio Buttons
登録日 : 2012年10月12日 最終更新日 : 2016年12月19日