Webデザイナーブログから学ぶホームページ制作

jQuery mobileではボタン、リスト、フォーム、ポップアップなど、簡単な指定で設置することができます。 html + cssの設定とは全く異なる指定方法ではありますが、指定方法がわかるようになると簡単です。

jQuery Mobileを利用してボタンを配置する方法を解説します。

ボタンを設置するにはbutton要素、a要素、input要素のいずれかを使います。
jQuery mobileでボタンを指定する要素として3つの要素があります。

　・「button」で指定する要素 　・「a」で指定する要素 　・「input」で指定する要素（type属性が「submit」「reset」「button」）

<button class="ui-btn">button 要素</button>

<a href="#" class="ui-btn">a 要素</a>

<input type="button" value="input ボタン">
<input type="submit" value="送信ボタン">
<input type="reset" value="リセットボタン">

実装サンプルを作りましたのでこちらでも確認してみてください。
ボタンサンプル

jQuery mobileでボタンを指定する方法に加え、角丸やドロップシャドウなどのスタイルも付け加えることができます。

※フォームボタンはデフォルトで角丸になっていますので、解除するには、データ属性「data-corners=”false”」を加えます。
※フォームボタンはデフォルトで影がついていますので、解除するには、データ属性「data-shadow=”false”」を加えます。

<button class="ui-btn ui-corner-all">角丸ボタン（button要素）</button>
<a href="#" class="ui-btn ui-corner-all">角丸ボタン（a要素）</a>
<input type="button" value="角丸ボタン（submit要素）" data-corners="false">

<button class="ui-btn ui-corner-all" style="border-radius: 8em;">角丸に8emとした角丸ボタン（button要素）</button>
<a href="#" class="ui-btn ui-corner-all" style="border-radius: 8em;">角丸に8emとした角丸ボタン（a要素）</a>

<button class="ui-btn ui-shadow">ドロップシャドウボタン（button要素）</button>
<a href="#" class="ui-btn ui-shadow">ドロップシャドウボタン（a要素）</a>
<input type="button" value="ドロップシャドウボタン（submit要素）">

<button class="ui-btn ui-shadow" style="box-shadow: 4px 4px 4px rgba(0,0,0,.4);">値を設定したドロップシャドウボタン（button要素）</button>
<a href="#" class="ui-btn ui-shadow" style="box-shadow: 4px 4px 4px rgba(0,0,0,.4);">値を設定したドロップシャドウボタン（a要素）</a>

実装サンプルを作りましたのでこちらでも確認してみてください。
ボタンサンプル

jQuery mobileでボタンを小さくしたり、短くする場合はスタイル要素を指定することで設定ができます。
ボタンを小さくする場合は「ui-mini」クラスを加え、ボタンを短くする場合は「ui-btn-inline」クラスを加えると指定することができます。
また、文字の白抜きボタンを指定する時は「data-theme」クラスを加え、機能を無効するボタンを指定する時は「ui-state-disabled」クラスを加え、スタイルを無効にするボタンを指定する時は「data-role=”none”」クラスを加えると指定することができます。

※フォームボタンには、データ属性「data-mini=”true”」を加えると小さなサイズにすることができます。

<button class="ui-btn ui-mini">小さめのボタン（button要素）</button>
<a href="#" class="ui-btn ui-mini">小さめのボタン（a要素）</a>
<input type="button" value="小さめのボタン（submit要素）" data-mini="true">

※フォームボタンには、データ属性「data-inline=”true”」を加えると短いボタンになります。

<button class="ui-btn ui-btn-inline">短いボタン（button要素）</button>
<a href="#" class="ui-btn ui-btn-inline">短いボタン（a要素）</a>
<input type="button" value="短いボタン（submit要素）" data-inline="true">

※フォームボタンは「data-theme」属性で指定します。

<a href="#" class="ui-btn ui-btn-b">文字の白抜きボタン（button要素）</a>
<button class="ui-btn ui-btn-b">文字の白抜きボタン（a要素）</button>
<input type="button" value="文字の白抜きボタン（submit要素）" data-theme="b">

<button class="ui-btn ui-state-disabled">機能を無効するボタン（button要素）</button>
<a href="#" class="ui-btn ui-state-disabled">機能を無効するボタン（a要素）</a>

<button data-role="none">スタイルを無効するボタン（button要素）</button>
<a href="#" data-role="none">機能を無効するボタン（a要素）</a>
<input type="button" value="文字の白抜きボタン（submit要素）" data-role="none">

実装サンプルを作りましたのでこちらでも確認してみてください。
ボタンサンプル

jQuery mobileでナビゲーションの用にひとつの枠にしたい場合は、「data-role=”controlgroup”」を指定するとグループ化することができます。
jQuery mobileでナビゲーションの用にボタンを横並びに指定する時は「data-type=”horizontal”」クラスを加え、縦並びに指定する時は「data-type=”vertical”」クラスを加えると指定することができます。

<div role="main" class="ui-content">
	<div data-role="controlgroup" data-type="horizontal">
		<a href="#" class="ui-btn">ボタン１</a>
		<a href="#" class="ui-btn">ボタン２</a>
		<a href="#" class="ui-btn">ボタン３</a>
		<a href="#" class="ui-btn">ボタン４</a>
	</div>
</div>

<div role="main" class="ui-content">
	<div data-role="controlgroup" data-type="vertical">
		<a href="#" class="ui-btn">ボタン１</a>
		<a href="#" class="ui-btn">ボタン２</a>
		<a href="#" class="ui-btn">ボタン３</a>
		<a href="#" class="ui-btn">ボタン４</a>
	</div>
</div>

実装サンプルを作りましたのでこちらでも確認してみてください。
ボタンサンプル

ボタンを設置する際に利用するクラス要素の一覧をご紹介します。

ボタンを設置する際にデータ要素一覧をご紹介します。

クラスも指定要素も簡単に配置できるのが良いですね。
CSSフレームワークのBootstrapに少し似ているところはありますが、css等のコードはjQuery Mobileの方が複雑ではないです。