jQuery Mobile ボタンを設置する

ボタンを設置するには a要素、button要素、input要素のいずれかを使います。jQuery Mobile ではそれらのボタンに適切なスタイルを適用し表示してくれます。この記事では基本的なボタンの設置からスタイルをカスタマイズする方法を解説します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. ボタン用のクラス
  2. ボタン用のデータ属性
  3. 基本的なボタンの設置方法
  4. ボタンのスタイル指定(カスタマイズ)
  5. グループボタン

【記事執筆時の環境】
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要素には影や角丸がついていませんが、フォームボタンにはついています。

【補足】
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">

影をつける

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">

小さいサイズにする

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">

インラインボタンにする

デフォルトではボタンはブロック要素になりますので、ウィンドウの横幅まで広がります。
もっと幅が狭いボタンにしたい場合は、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">

スウォッチを指定する

デフォルトスォッチは "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">

ボタンを無効にする

予期しないところでボタンをタップされるのを防ぐため、無効にしておくことができます。
ui-state-disabledクラスを加えるとボタンがグレーアウトされて利用不可になります。

<a href="#" class="ui-btn ui-state-disabled">ボタン</a>
<button class="ui-btn ui-state-disabled">ボタン</button>

なお、条件によって有効/無効を動的に切り替えるには、JavaScriptのコードが必要になります。これについては別途紹介する予定です。

jQuery Mobile のスタイルを解除する

button要素とフォームボタンには、何も指定しなくても自動的に jQuery Mobile のスタイルが適用されます。
これを解除するには、「data-role="none"」を指定します。

<button data-role="none">ボタン</button>
<input type="button" value="フォームボタン" data-role="none">

グループボタン

複数のボタンを囲んだコンテナ要素に「data-role="controlgroup"」を指定すると、ボタンをグループ化することができます。グループ化されたボタンは隙間なく配置されます。
配列は水平方向と垂直方向が指定できます。コンテナ要素に「data-type="horizontal"」を指定すると水平方向の横並びになり、「data-type="vertical"」を指定すると垂直方向の縦並びになります。デフォルトは垂直方向です。

ボタンはモバイルページには必ず必要となるパーツです。ボタンデザインの違いで使い勝手がかなり変わりますので、jQuery Mobile の仕様がどのようになっているか十分理解するようにしましょう。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ