jQuery Mobile ボタンを設置する
公開日：2014年10月10日
最終更新日：2014年11月8日
ボタンを設置するには a要素、button要素、input要素のいずれかを使います。jQuery Mobile ではそれらのボタンに適切なスタイルを適用し表示してくれます。この記事では基本的なボタンの設置からスタイルをカスタマイズする方法を解説します。
«次の特集記事» jQuery Mobile アイコンをボタンに表示する
«前の特集記事» jQuery Mobile 提供されているアイコン
【コンテンツ】
【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5
ボタン用のクラス
バージョン1.4からボタンはデータ属性ではなく、すべてクラスでデザインするようになっています。ただしフォームボタンはデータ属性を使います。
以下にボタンを設置する際に使うクラスを示します。アイコン関連のクラスは次の記事で紹介しますので、今回の記事では使用しません。
| クラス | 説明 |
|---|---|
| ui-btn | ボタンとしてスタイルする要素に指定する。 |
| ui-btn-inline | インライン要素としてボタンを表示する。これによりボタンはテキストの長さに応じた幅で横に並ぶ。 |
| ui-corner-all | 角丸をつける。 |
| ui-mini | 小さいサイズにする。 |
| ui-shadow | 影をつける。 |
| ui-btn-[a-z] | 適用するスウォッチ。デフォルトは "a" |
| ui-state-disabled | 利用不可にする。 |
| ui-btn-icon-top | アイコンをテキストの上に表示する。 |
| ui-btn-icon-right | アイコンをテキストの右に表示する。 |
| ui-btn-icon-bottom | アイコンをテキストの下に表示する。 |
| ui-btn-icon-left | アイコンをテキストの左に表示する。 |
| ui-btn-icon-notext | テキストは表示されずアイコンだけのボタンになる。 |
| ui-shadow-icon | アイコンに影をつける。 |
ボタン用のデータ属性
フォームボタンは自動的にスタイルが適用されるようになっていますが、カスタマイズするときは以下のデータ属性を使います。
| データ属性 | 値 | 説明 |
|---|---|---|
| data-corners | true | false | ボタンに角丸をつけるかどうか |
| data-icon | アイコンリスト参照 | ボタンに表示するアイコン デフォルトはアイコンなし |
| data-iconpos | left | right | top | bottom | notext | アイコンの表示位置 |
| data-iconshadow | true | false | アイコンに影をつけるかどうか バージョン1.4で非推奨、1.5で削除予定 |
| data-inline | true | false | ボタンをインライン要素にするかどうか |
| data-mini | true | false | 小さいサイズにするかどうか |
| data-shadow | true | false | ボタンに影をつけるかどうか |
| data-theme | swatch letter (a-z) | 適用するスウォッチ |
基本的なボタンの設置方法
a要素
ui-btnクラスを指定すると、リンクがボタンとして表示されます。
<a href="#" class="ui-btn">ボタン</a>
button要素
ui-btnクラスを指定します。指定しなくてもスタイルは適用されますが、他のクラスを加えカスタマイズしたいときは必ず ui-btnクラスも一緒に指定しなければなりません。
<button class="ui-btn">ボタン</button>
フォームボタン
input要素で指定するフォームボタン(type="button | submit | reset")には、スタイルが自動的に適用されます。
<input type="button" value="フォームボタン">
<input type="submit" value="送信ボタン">
<input type="reset" value="リセットボタン">
以下のコードでボタンを設置してみました。DEMOページをみると、どのように表示されるかわかります。
a要素と button要素には影や角丸がついていませんが、フォームボタンにはついています。
|
1 2 3 4 5 6 7 |
<div role="main" class="ui-content"> <a href="#" class="ui-btn">a要素ボタン</a> <button class="ui-btn">button要素ボタン</button> <input type="button" value="フォームボタン"> <input type="submit" value="送信ボタン"> <input type="reset" value="リセットボタン"> </div> |
【補足】
button要素には、「class="ui-btn"」を指定しなくてもスタイルは適用されます。そのときは影と角丸がついたボタンになります。
ボタンのスタイル指定(カスタマイズ)
ボタンは用意されているクラスかデータ属性を加えることで、スタイルをカスタマイズすることができます。
角丸をつける
a要素と button要素のボタンは角丸になっていませんが、ui-corner-allクラスを加えることで角丸をつけることができます。
角丸のデフォルト値は「border-radius: .3125em」になっています。値を変更するには CSSを修正するか border-radiusプロパティを上書きします。
<a href="#" class="ui-btn ui-corner-all">ボタン</a>
<button class="ui-btn ui-corner-all">ボタン</button>
フォームボタンはデフォルトで角丸になっています。
これを解除するには、データ属性「data-corners="false"」を加えます。
<input type="button" value="フォームボタン" data-corners="false">
|
1 2 3 4 5 6 7 |
<div role="main" class="ui-content"> <a href="#" class="ui-btn">角丸なしボタン</a> <a href="#" class="ui-btn ui-corner-all">角丸つきボタン</a> <a href="#" style="border-radius: 1em;" class="ui-btn ui-corner-all">角丸=1emのボタン</a> <input type="button" value="フォームボタン"> <input type="button" value="フォームボタン(角丸解除)" data-corners="false"> </div> |
影をつける
a要素と button要素のボタンには影がついていませんが、ui-shadowクラスを加えることで影をつけることができます。
影のデフォルト値は「box-shadow: 0 1px 3px rgba(0,0,0,.15)」になっています。値を変更するには CSSを修正するか border-shadowプロパティを上書きします。
<a href="#" class="ui-btn ui-shadow">ボタン</a>
<button class="ui-btn ui-shadow">ボタン</button>
フォームボタンはデフォルトで影がついています。
これを解除するには、データ属性「data-shadow="false"」を加えます。
<input type="button" value="フォームボタン" data-shadow="false">
|
1 2 3 4 5 6 7 |
<div role="main" class="ui-content"> <a href="#" class="ui-btn">影なしボタン</a> <a href="#" class="ui-btn ui-shadow">影つきボタン</a> <a href="#" class="ui-btn ui-shadow" style="box-shadow: 3px 3px 3px rgba(0,0,0,.5);">影つきボタン(値変更)</a> <input type="button" value="フォームボタン"> <input type="button" value="フォームボタン(影解除)" data-shadow="false"> </div> |
小さいサイズにする
a要素と button要素のボタンには、ui-miniクラスを加えると小さなサイズにすることができます。
フォームボタンには、データ属性「data-mini="true"」を加えると小さなサイズにすることができます。
<a href="#" class="ui-btn ui-mini">ボタン</a>
<button class="ui-btn ui-mini">ボタン</button>
<input type="button" value="フォームボタン" data-mini="true">
|
1 2 3 4 5 6 7 8 |
<div role="main" class="ui-content"> <a href="#" class="ui-btn">通常サイズa要素ボタン</a> <a href="#" class="ui-btn ui-mini">ミニサイズa要素ボタン</a> <button class="ui-btn">通常サイズbutton要素ボタン</button> <button class="ui-btn ui-mini">ミニサイズbutton要素ボタン</button> <input type="button" value="通常サイズフォームボタン"> <input type="button" value="ミニサイズフォームボタン" data-mini="true"> </div> |
インラインボタンにする
デフォルトではボタンはブロック要素になりますので、ウィンドウの横幅まで広がります。
もっと幅が狭いボタンにしたい場合は、ui-btn-inlineクラスを加えてインラインボタンにします。
これによりボタンはテキストの長さに応じた幅になり、floatして横に並ぶようになります。
フォームボタンには、データ属性「data-inline="true"」を加えるとインラインボタンになります。
<a href="#" class="ui-btn ui-btn-inline">ボタン</a>
<button class="ui-btn ui-btn-inline">ボタン</button>
<input type="button" value="フォームボタン" data-inline="true">
|
1 2 3 4 5 6 7 |
<div role="main" class="ui-content"> <a href="#" class="ui-btn">ブロックボタン</a> <a href="#" class="ui-btn ui-btn-inline">インライン1</a> <a href="#" class="ui-btn ui-btn-inline">インライン2</a> <input type="button" value="ブロックフォームボタン"> <input type="button" value="インラインフォームボタン" data-inline="true"> </div> |
スウォッチを指定する
デフォルトスォッチは "a" です。
これを変更するには、ui-btn-[a-z]クラスで指定します。フォームボタンは data-theme属性で指定します。
<a href="#" class="ui-btn ui-btn-b">ボタン</a>
<button class="ui-btn ui-btn-b">ボタン</button>
<input type="button" value="フォームボタン" data-theme="b">
|
1 2 3 4 5 6 |
<div role="main" class="ui-content"> <a href="#" class="ui-btn">スウォッチ"a"</a> <a href="#" class="ui-btn ui-btn-b">スウォッチ"b"</a> <input type="button" value='スウォッチ"a"(フォームボタン)'> <input type="button" value='スウォッチ"b"(フォームボタン)' data-theme="b"> </div> |
ボタンを無効にする
予期しないところでボタンをタップされるのを防ぐため、無効にしておくことができます。
ui-state-disabledクラスを加えるとボタンがグレーアウトされて利用不可になります。
<a href="#" class="ui-btn ui-state-disabled">ボタン</a>
<button class="ui-btn ui-state-disabled">ボタン</button>
|
1 2 3 4 |
<div role="main" class="ui-content"> <a href="#" class="ui-btn">有効ボタン</a> <a href="#" class="ui-btn ui-state-disabled">無効ボタン</a> </div> |
なお、条件によって有効/無効を動的に切り替えるには、JavaScriptのコードが必要になります。これについては別途紹介する予定です。
jQuery Mobile のスタイルを解除する
button要素とフォームボタンには、何も指定しなくても自動的に jQuery Mobile のスタイルが適用されます。
これを解除するには、「data-role="none"」を指定します。
<button data-role="none">ボタン</button>
<input type="button" value="フォームボタン" data-role="none">
|
1 2 3 4 |
<div role="main" class="ui-content"> <button>スタイル適用</button> <button data-role="none">スタイル解除</button> </div> |
グループボタン
複数のボタンを囲んだコンテナ要素に「data-role="controlgroup"」を指定すると、ボタンをグループ化することができます。グループ化されたボタンは隙間なく配置されます。
配列は水平方向と垂直方向が指定できます。コンテナ要素に「data-type="horizontal"」を指定すると水平方向の横並びになり、「data-type="vertical"」を指定すると垂直方向の縦並びになります。デフォルトは垂直方向です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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 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> |
ボタンはモバイルページには必ず必要となるパーツです。ボタンデザインの違いで使い勝手がかなり変わりますので、jQuery Mobile の仕様がどのようになっているか十分理解するようにしましょう。
«次の特集記事» jQuery Mobile アイコンをボタンに表示する
«前の特集記事» jQuery Mobile 提供されているアイコン
スポンサーリンク
