jQueryMobileでAタグを使ったボタンの基本的な使い方

• ホーム
• Javascript,CSS,HTMLデザイン無料素材集
• jQueryMobileでAタグを使ったボタンの基本的な使い方

jQueryMobileではAタグにdata-role="button"の属性を与えることにより見た目がボタンになります。
ボタンは自動的にコンテンツの幅の100%の大きさになり、高さも自動で設定されます。
ボタンの幅が狭くてキャプションを表示できない場合は自動的にキャプションの途中で「・・・」（省略）表示になります。

標準ボタン

標準ボタン（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>
				

ボタンに表示されるアイコン(data-icon="****")