jQuery Mobile逆引きリファレンス
jQuery Mobileページにボタンを配置するには？
jQuery Mobileページでボタンを設置するには、＜button＞／＜a＞／＜input＞要素などを利用するのが一般的。これらを使ってさまざまなレイアウトを実現する方法を説明。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
jQuery Mobileページでボタンを設置するには、以下の要素を利用するのが一般的です。
- <button>要素
- <a>要素
- <input>要素（type属性が「submit」「reset」「button」）
本稿では、これらの要素を使って、さまざまなボタンをレイアウトする方法について紹介していきます。
<button>／<a>要素でボタンをレイアウトする
<button>／<a>要素でボタンをレイアウトするには、以下のようにclass属性を利用します*1。
- *1 jQuery Mobile 1.3以前では、要素には「data-role="button"」を付与するのが一般的でしたが、1.4以降では非推奨となっています。
|
<div role="main" class="ui-content">
<button class="ui-btn">button要素</button>
<a href="index.html" class="ui-btn">a要素</a>
</div>
|
「class="ui-btn"」属性は、要素をボタンとしてレイアウトするための基本的な宣言です。以降、ボタンに関わるスタイルを指定する際の前提となります。
ボタンに関わるスタイル
ボタンに関わるスタイルには、以下のようなものがあります。
（1）インラインモードで表示
ボタンはデフォルトでブロック要素（＝画面幅いっぱいにレイアウトし、前後に改行）としてレイアウトされます。これをインライン要素（＝ブロック内に配置でき、前後に改行はない）として配置するには、ui-btn-inlineスタイルクラスを利用します。
|
<button class="ui-btn ui-btn-inline">button要素</button>
<a href="index.html" class="ui-btn ui-btn-inline">a要素</a>
|
（2）ボタンを角丸にする
ui-corner-allスタイルクラスを利用します。
|
<button class="ui-btn ui-corner-all">button要素</button>
<a href="index.html" class="ui-btn ui-corner-all">a要素</a>
|
（3）ボタンに影を付与する
ui-shadowスタイルクラスを利用します。
|
<button class="ui-btn ui-shadow">button要素</button>
<a href="index.html" class="ui-btn ui-shadow">a要素</a>
|
（4）ボタンにテーマを付与する
ui-btn-*スタイルクラスを利用します。「*」はスウォッチを意味する「a」～「z」のいずれかの値を指定します。デフォルトのテーマで提供されるスウォッチは「a」「b」のみです。
|
<button class="ui-btn ui-btn-b">button要素</button>
<a href="index.html" class="ui-btn ui-btn-b">a要素</a>
|
（5）ボタンを利用不可にする
ui-state-disabledスタイルクラスを利用します。<button>要素では、単にHTMLのdisabled属性を付与します。
|
<a href="index.html" class="ui-btn ui-state-disabled">a要素</a>
<button disabled>button要素</button>
|
（6）ボタンをよりコンパクトに表示する
ui-miniスタイルクラスを利用することで、サイズをコンパクトにしたミニバージョンのボタンを作成できます。
|
<button class="ui-btn ui-mini">button要素</button>
<a href="index.html" class="ui-btn ui-mini">a要素</a>
|
（7）ボタンに対するスタイルを除去する
jQuery Mobile 1.4の時点では、<button>要素には自動的にjQuery Mobileのスタイルが適用されます。よって、スタイルが一切適用されないネイティブなボタンを生成するには、「data-role="none"」属性を付与します（<a>要素については、明示的にスタイル付しない限り、リンクを表示しますので、不要です）。
|
<button data-role="none">button要素</button>
|
<input>要素でボタンをレイアウトする
<input>要素（「type="submit"」「"reset"」「"button"」であるもの）では、内部的にButtonウィジェットが適用されます*2。もろもろのスタイル付けもdata-xxxxx属性を使って行います。以下に、Buttonウィジェットで利用できるdata-xxxxx属性をまとめます。用法は、上で紹介したスタイルクラスに対応していますので、併せて参照してください。
- *2 この挙動は「data-role="none"」属性を付与することで無効化できます。
| 属性 | 概要 | デフォルト値 |
|---|---|---|
| data-corners | ボタンの角を丸めるか | true |
| data-icon | ボタンに付与するアイコン | － |
| data-iconpos | アイコンの表示位置 | left |
| data-iconshadow | アイコンに影を付与するか（非推奨） | false |
| data-inline | ボタンをインライン要素として表示するか | false |
| data-mini | ボタンをミニバージョンで表示するか | false |
| data-shadow | ボタンに影効果を付与するか | true |
| data-theme | ボタンに適用するテーマ | （親要素を継承） |
- *3 アイコンについては、別稿「jQuery Mobileページでアイコン付きのボタンを配置するには？」で後日詳解の予定です。
ボタンをグループ化する
Controlgroupウィジェットを利用することで、ボタンをグループ化できます。グループ化されたボタンは互いに余白無しに配置され、先頭末尾のボタンにのみ角丸効果が付与されます。
|
<div data-role="controlgroup">
<button class="ui-btn">button要素</button>
<a href="index.html" class="ui-btn">a要素</a>
<input type="button" value="input要素" />
</div>
|
Controlgroupウィジェットは、ボタンのコンテナー要素（一般的には<div>要素）に対して、「data-role="controlgroup"」属性を付与することで適用できます。
「data-type="horizontal"」属性を付与することで、ボタンを水平方向にまとめることもできます。ただし、画面の横幅に入りきらない場合、途中で改行されますので注意してください。
|
<div data-role="controlgroup" data-type="horizontal">
|
※以下では、本稿の前後を合わせて5回分（第5回～第9回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
6. jQuery Mobileページでローディング表示をカスタマイズするには？
jQuery Mobileで、ページ読み込みに際してローディングアイコンを表示する方法と、ローディング表示を制御する基本的なテクニックを解説。
7. 【現在、表示中】≫ jQuery Mobileページにボタンを配置するには？
jQuery Mobileページでボタンを設置するには、＜button＞／＜a＞／＜input＞要素などを利用するのが一般的。これらを使ってさまざまなレイアウトを実現する方法を説明。
8. jQuery Mobileページでアイコン付きのボタンを配置するには？
jQuery Mobileページでボタンを設置する方法について説明。今回は、アイコン付きのボタンをレイアウトする方法を解説する。
9. Navbarウィジェットでナビゲーションバーを作成するには？
アプリ共通のリンクやコマンドボタンなどを配置するために使われるナビゲーションバーを、jQuery MobileのNavbarウィジェットで手軽に作成する方法を解説する。
