戻る

ボタン

このサイトの仕様上、部品は目的の動作と異なることがあるので、ソースを活用してください。

ボタンにアイコンを表示する

お気に入り 
<a href="#" data-role="button" data-icon="star">お気に入り</a>

アイコンの表示位置を変える（１）―テキストの下に表示する

お気に入り 
<a href="#" data-role="button" data-icon="star" data-iconpos="bottom">お気に入り</a>

アイコンの表示位置を変える（２）―テキストの上に表示する

お気に入り 
<a href="#" data-role="button" data-icon="star" data-iconpos="top">お気に入り</a>

アイコンの表示位置を変える（１）―テキストの下に表示する

お気に入り 
<a href="#" data-role="button" data-icon="star" data-iconpos="bottom">お気に入り</a>

アイコンの表示位置を変える（３）―テキストの右に表示する

お気に入り 
<a href="#" data-role="button" data-icon="star" data-iconpos="right">お気に入り</a>

アイコンだけのボタンを作る

お気に入り 
<a href="#" data-role="button" data-icon="star" data-iconpos="notext">お気に入り</a>

ボタンをグループ化する（１）―縦方向にグルーピング

そう思う どちらかというと、そう思う そう思わない わからない 
<div data-role="controlgroup">
	<a href="agree.php" data-role="button">そう思う</a>
	<a href="maybe.php" data-role="button">どちらかというと、そう思う</a>
	<a href="disagree.php" data-role="button">そう思わない</a>
	<a href="no-idea.php" data-role="button">わからない</a>
</div>

ボタンをグループ化する（２）―横方向にグルーピング

そう思う そう思わない わからない 
<div data-role="controlgroup" data-type="horizontal">
	<a href="agree.php" data-role="button">そう思う</a>
	<a href="disagree.php" data-role="button">そう思わない</a>
	<a href="no-idea.php" data-role="button">わからない</a>
</div>

角の丸くないボタンを作る

角の丸くないボタン 
<a href="#" data-role="button" data-corners="false">角の丸くないボタン</a>

アイコンの影を消す

アイコンに影の無いボタン 
<a href="#" data-role="button" data-icon="star" data-iconshadow="false">アイコンに影の無いボタン</a>

ボタンをインラインモードにする

インラインボタン1 インラインボタン2 通常のボタン 
<a href="#" data-role="button" data-inline="true">インラインボタン1</a>
<a href="#" data-role="button" data-inline="true">インラインボタン2</a>
<a href="#" data-role="button">通常のボタン</a>

ボタンの影を消す

影の無いボタン 通常のボタン 
<a href="#" data-role="button" data-shadow="false">影の無いボタン</a>
<a href="#" data-role="button">通常のボタン</a>

ボタンのテーマを変える

スウォッチA スウォッチB スウォッチC スウォッチD スウォッチE 
<a href="#" data-role="button" data-theme="a">スウォッチA</a>
<a href="#" data-role="button" data-theme="b">スウォッチB</a>
<a href="#" data-role="button" data-theme="c">スウォッチC</a>
<a href="#" data-role="button" data-theme="d">スウォッチD</a>
<a href="#" data-role="button" data-theme="e">スウォッチE</a>

自動的にボタン化する要素を変える

<button>button</button>
<input type="submit" value="input[type=submit]">
<input type="submit" value="input[type=reset]">
<input type="submit" value="input[type=button]">
<input type="submit" value="input[type=image]">
<button class="buttonize">button</button>
<button class="buttonize">button</button>

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

ボタンの使用可／不可を切り替える

<button id="button-enable">使用可</button>
<button id="button-disable">使用不可</button>

$("#button-enable").button("enable");
$("#button-disable").button("disable");

アンカーボタンの使用可／不可を切り替える

使用可 使用不可 
<a href="#" data-role="button" id="button-enable" class="ui-disabled">使用可</a>
<a href="#" data-role="button" id="button-disable">使用不可</a>

$("#button-enable").removeClass("ui-disabled");
$("#button-disable").addClass("ui-disabled");

ボタンの体裁をまとめて指定する

サイトのトップに戻りたい場合はホームを押してください。いつでもホームに帰ることができます。

ホームは、通常ヘッダの左上に置かれています。

<p>サイトのトップに戻りたい場合は<a href="/" class="home">ホーム</a>を押してください。いつでもホームに帰ることができます。</p>
<p><a href="/" class="home">ホーム</a>は、通常ヘッダの左上に置かれています。</p>

$("div").live("pagecreate",function(){
	$("a.home").buttonMarkup({
		icon:"home",
		iconpos:"notext",
		inline:true
	});
});
inserted by FC2 system