グループボタン

場合によっては、複数のボタンをグループ化して使いたい場合があるでしょう。その場合、コンテナとなる要素でグルーピングしたいボタンを囲み data-role=“controlgroup” 属性を指定します。フレームワークは自動的に余白や影を消したり、丸くする角を調整してグループボタンにします。

<div data-role="controlgroup">
        <a href="/doc/jquery_mobile/" data-role="button">Yes</a>
        <a href="/doc/jquery_mobile/" data-role="button">No</a>
        <a href="/doc/jquery_mobile/" data-role="button">Maybe</a>
</div>

デフォルトではボタンは縦方向にグループ化されます。

Yes No Maybe

ここで data-type=“horizontal” 属性を controlgroup に追加することで、横方向に並べられたグループボタンを作ることができます。(ボタンの数が多かったり、テキストが長くなったりして横一列に入らなかった場合は、複数行になります)

横方向グループボタン:

Yes No Maybe

コントロールグループに data-mini=“true” を指定した、ミニサイズの横方向グループボタン:

Yes No Maybe

アイコン付き横方向グループボタン:

Up Down Delete

コントロールグループに data-mini=“true” を指定した、ミニサイズのアイコン付き横方向グループボタン:

Add Delete

アイコンのみ横方向グループボタン:

Up Down Delete