jQueryMobileではAタグにdata-role="button"の属性を与えることにより見た目がボタンになります。
ボタンは自動的にコンテンツの幅の100%の大きさになり、高さも自動で設定されます。
ボタンの幅が狭くてキャプションを表示できない場合は自動的にキャプションの途中で「・・・」(省略)表示になります。
標準ボタン
<a href="" data-role="button" data-icon="bars">標準ボタン</a>
標準ボタン
標準ボタン(aタグをボタン表示)
<a href="" data-role="button" data-icon="edit" data-mini="true">小さい標準ボタン</a>小さい標準ボタン
インラインボタン(横幅一杯にならない)
<a href="" data-role="button" data-inline="true" data-icon="bars">インラインボタン</a>インラインボタン
<a href="" data-role="button" data-inline="true" data-icon="edit" data-mini="true">小さいインラインボタン</a>
小さいインラインボタン
グループボタン
<div data-role="controlgroup"> <a href="" data-role="button" data-icon="arrow-l" class="ui-btn-active">1個目(アクティブ)</a> <a href="" data-role="button" data-icon="arrow-d">2個目</a> <a href="" data-role="button" data-icon="arrow-r">3個目</a> </div>
グループ水平ボタン
<div data-role="controlgroup" data-type="horizontal"> <a href="" data-role="button" data-icon="bars">bars</a> <a href="" data-role="button" data-icon="edit">edit</a> <a href="" data-role="button" data-icon="arrow-l" data-iconpos="left">arrow-l</a> <a href="" data-role="button" data-icon="arrow-r" data-iconpos="right">arrow-r</a> <a href="" data-role="button" data-icon="arrow-u" data-iconpos="top">arrow-u</a> <a href="" data-role="button" data-icon="arrow-d" data-iconpos="bottom">arrow-d</a> </div>