button()
button()はボタンウィジェットを作成するためのメソッドです。
このメソッドはセレクターで指定した要素をボタンに変換することができます。このメソッドはbuttonMarkup()とほぼ同じ機能を有します。
$("p").button();
このように通常はボタンに変換されないp要素の形状をボタンに変換します。これは要素にdata-role=”button”を付加した場合と同等の処理になります。
ボタンに変換する際に引数に様々なオプションを指定することができます。
オプション
corners
true
falseを指定することで角丸ではないボタンが生成できます。
$("#p1").button({ corners: false });
これは、data-corners属性と同じ指定の意味をもちます。
icon
null
ボタンに表示するアイコン画象を指定することができます
$("#p2").button({ icon: "star" });
これはdata-icon属性と同じ指定になります。
iconpos
left
ボタンに表示するアイコンの位置を”right”、”left”、”top”、”bottom”の値で指定できます。
$("#p3").button({ icon: "star",iconpos: "right"});
これはdata-iconpos属性と同じ指定になります。
iconshadow
ボタンに表示するアイコンに影をつけるかどうか指定できます。
true
$("#p4").button({ icon: "star",iconshadow:false});
これはdata-iconshadow属性と同じ指定になります。
inline
null (false)
ボタンをインライン要素で表示するかどうかを指定できます。
$("#p5").button({ inline: true });
これはdata-inline属性と同じ指定になります。
mini
null (false)
ボタンを小さく表示するか指定できます。
$("#p6").button({ mini: true });
これはdata-mini属性と同じ指定になります。
shadow
ボタンに影をつけるかどうか指定できます。
$("#p7").button({ shadow: false });
これはdata-shadow属性と同じ指定になります。
theme
ボタンのテーマを指定できます。
true
$("#p8").button({ theme: "a" });
これはdata-theme属性と同じ指定になります。
メソッド
button()は引数に以下の文字列を与えることで特定の機能をもつとされています。ただ、jQuery Mobile 1.3では動作しません。button()ではjQuery Mobile 1.2以下では動作します。
disable
このメソッドはinput要素「submit」といったフォームのボタンで利用でき送信機能をOFFにすることができます。
$("div").button("disable");
enable
このメソッドはinput要素「submit」といったフォームのボタンで利用でき送信機能をONにすることができます。
$("div").button("enable");
refresh
このメソッドはJavaScriptによりオプションを変更した場合、一度このメソッドを実行して再描画できます。
$("div").button("refresh");
イベント
button()はオプションでcreateイベントが指定できます。これはボタンの生成が終った後に実行されます。
$("#p10").buttonMarkup({
create: function(event, ui) {
alert("ok")
}
}).buttonMarkup();
参考URL
Button Widget | jQuery Mobile API Documentation
登録日 : 2013年06月26日 最終更新日 : 2016年12月19日
同じカテゴリー(メソッド)のエントリー
- $.widget()
- enhanceWithin()
- collapsibleset()
- collapsible()
- checkboxradio()
- buttonMarkup()
- button()
- $.mobile.silentScroll()
- $.mobile.path.parseUrl()
- $.mobile.path.makeUrlAbsolute()
- $.mobile.path.isRelativeUrl()
- $.mobile.path.isAbsoluteUrl()
- $.mobile.path.get()
- $.mobile.navigate()
- jqmEnhanceable()
- panel()
- popup()
- selectmenu()
- slider()
- textinput()
- $.mobile.changePage()
- page()
- $.mobile.LoadPage()
- dialog()