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

トップページJavascript CSS講座⇒jQueryMobileでAタグを使ったボタンの基本的な使い方

jQueryMobileでAタグを使ったボタンの基本的な使い方(data-role="button")


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>
				
1個目(アクティブ) 2個目 3個目 4個目 5個目

グループ水平ボタン

<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="****")

bars edit arrow-l arrow-r arrow-u arrow-d
delete plus minus check gear refresh
forward back grid star alert info home search