ボタンの基本

ボタンは通常のHTMLによるアンカーやinput要素としてコーディングされ、jQuery Mobileによりモバイル端末上でより目立ち易く、また使いやすく最適化されます。アンカーリンク(a要素)はナビゲーションボタンとして、そして input や button 要素はフォーム内で使います。ボタンに設定可能な属性はdata属性リファレンスを参照してください。

リンクをボタンにする

メインコンテンツの中でも、アンカーリンクに data-role=“button” 属性を記述することで、ボタンとして整形することができます。フレームワークが、自動的に必要なクラスをこの要素に追加します。たとえば、次のようにマークアップします。

Link button

Link button

リンクをボタン状にしたものは、下で紹介するようなフォームベースのボタンと同じ見た目を有しています。しかし、そこには幾つかの重要な違いがあります。リンクによるボタンは実際には button プラグインではなく、ただ buttonMarkup プラグインによりボタンとしての見た目を整形されているだけです。そのため、button プラグインが持つメソッド(enable, disable, refresh)はサポートしていません。リンクによるボタンを無効状態にしたい場合、そのためのクラス ui-disabled をJavaScriptなどを使って自分で設定することにより同じ効果が得られます。

フォームボタン

スタイル設定を簡便にするため、フレームワークは button 要素、 input 要素で type が submit, reset, button, image のいずれかであるものを、リンクによるボタンに変更します。この場合は data-role=“button” 属性は必要ありません。しかし必要であれば、jQueryプラグインがするようにセレクタで指定した要素に対してボタンプラグインを直接呼び出すことも出来ます。

$('[type='submit']').button();

元のボタン要素は hidden として残されます。自動作成されたリンク要素がクリックされた場合は、元もとのボタンのクリックイベントを呼び出します。フォームボタンを拡張形式にしたく無い場合は data-role=“none” 属性を追加することにより、ネイティブコントロールとして描画されるようになります。

Button based button:

Input type=“button” based button:

Input type=“submit” based button:

Input type=“reset” based button:

Input type=“image” based button:

オプション

以下のオプションは、全てのボタンに適用可能です。

corners boolean

default: true

ここにtrueを設定した場合、テーマで設定された角の丸みが適用されます。このオプションは、次のようなdata属性でも設定可能です: data-corners="false"

$('a').buttonMarkup({ corners: "false" });
No rounded corners
icon string

default: null

ボタンに表示するアイコンを アイコンセット から指定します。このオプションは、次のようなdata属性でも指定可能です: data-icon="star"

$('a').buttonMarkup({ icon: "star" });
Star icon
iconpos string

default: "left"

ボタン上のアイコン位置を指定します。指定可能な値は、left, right, none, notextのいずれかです。notextを指定すると、テキスト表示の無いアイコンだけのボタンになります。このオプションは、次のようなdata属性でも指定可能です: data-iconpos="left"

$('a').buttonMarkup({ iconpos: "right" });
Star icon
iconshadow boolean

default: true

ここにtrueを設定した場合、ボタンのアイコンにテーマで設定された影がつけられます。このオプションは、次のようなdata属性でも設定可能です: data-iconshadow="false"

$('a').buttonMarkup({ iconshadow: "false" });
No icon shadow
inline boolean

default: null (false)

ここにtrueを設定した場合、ボタンをインラインで表示するようになります。その時の横幅はボタンのテキストによります。初期状態ではこの値はnull(false)なので、ボタンの横幅は画面いっぱいになります。このオプションは、次のようなdata属性でも設定可能です: data-inline="true"

$('a').buttonMarkup({ inline: "true" });
Inline
shadow boolean

default: true

ここにtrueを設定した場合、ボタンが影付きになります。このオプションは、次のようなdata属性でも設定可能です: data-shadow="false"

$('a').buttonMarkup({ shadow: "false" });
No button shadow
theme string

default: null, 親要素から継承

ウィジェットの色(スウォッチ)を指定します。テーマで定義されたスウォッチをあらわすaからzまでのアルファベットが指定できます。デフォルトでは、個別に設定されない場合、親要素のスウォッチ指定を引き継ぐようになっています。このオプションは、次のようなdata属性でも設定可能です: data-theme="a"

$('a').buttonMarkup({ theme: "a" });
Theme A

次のオプションは、フレームワークによるフォームボタンの自動初期化にのみ適用されます。

initSelector CSS selector string

default: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"

ここには、フォームボタンとして自動初期化する対象をあらわすセレクタ(要素やdata-roleなど)を定義します。この記述は mobileinit イベントで行います。

$( document ).bind( "mobileinit", function(){
   $.mobile.button.prototype.options.initSelector = ".myButtons";
});

メソッド

次のメソッドは、フォームボタンでのみ使用可能です。リンクによるボタンでは、これらのメソッドは使えません。

enable 無効化されているフォームボタンを有効にする。
$('[type='submit']').button('enable');
disable フォームボタンを無効化する。
$('[type='submit']').button('disable');
refresh フォームボタンの状態を更新する。

JavaScriptでボタンを操作した場合、更新を見栄えに反映させるため refresh メソッドを呼ばなければなりません。

$('[type='submit']').button('refresh');

イベント

jQuery Mobileによる仮想的なイベント、もしくは change, focus, blur などのような標準的なJavaScriptのイベントにバインドできます。

$( ".myButton" ).bind( "click", function(event, ui) {
  ...
});

フォームボタンプラグインのみ、次のカスタムイベントを持っています。

create フォームボタンが作られた際に呼ばれます。
$('[type='submit']').button({
   create: function(event, ui) { ... }
});