button()

このエントリーをはてなブックマークに追加

button()はボタンウィジェットを作成するためのメソッドです。

このメソッドはセレクターで指定した要素をボタンに変換することができます。このメソッドはbuttonMarkup()とほぼ同じ機能を有します。

$("p").button();

sample

このように通常はボタンに変換されない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日

同じカテゴリー(メソッド)のエントリー

検索

スポンサードリンク

バージョン

リファレンス