戻る

ダイアログ

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

ダイアログの表示効果を変える（１）―リンクごとに変える

pop slideup flip 
<a href="chapter725.html" data-role="button" data-rel="dialog" data-transition="pop">pop</a>
<a href="chapter725.html" data-role="button" data-rel="dialog" data-transition="slideup">slideup</a>
<a href="chapter725.html" data-role="button" data-rel="dialog" data-transition="flip">flip</a>

ダイアログの表示効果を変える（１）―定常的に変える

$(document).bind("mobileinit",function(){
	$.mobile.defaultDialogTransition = "slideup";
});

閉じるボタンを作る（１）―キャンセルボタンを作る

キャンセル
<div class="ui-grid-a">
	<div class="ui-block-a"><button id="ok-btn" data-theme="b">OK</button></div>
	<div class="ui-block-b"><a href="/" data-role="button" data-rel="back" data-theme="c">キャンセル</a></div>
</div>

閉じるボタンを作る（２）―JavaScriptから閉じる

キャンセル
<div class="ui-grid-a">
	<div class="ui-block-a"><button id="ok-btn" data-theme="b">OK</button></div>
	<div class="ui-block-b"><a href="/" data-role="button" data-rel="back" data-theme="c">キャンセル</a></div>
</div>

$("pg-dialog").live("pageinit",function(){
	$("ok-btn").click(function(){
		//ダイアログ上での処理
		$(".ui-dialog").dialog("close");
	});
});

閉じるボタンのテキストを変える（１）―ダイアログごとにマークアップ

… 
<div data-role="page" id="pg-dialog" data-close-btn-text="ダイアログを閉じる">
…
</div>

閉じるボタンのテキストを変える（２）―定常的に変える

$.mobile.dialog.prototype.options.closeBtnText = "ダイアログを閉じる";

コントロール風のダイアログを作る

記事を共有

キャンセル 
<div data-role="page" data-theme="b">
	<div data-role="content">
	<p>記事を共有</p>
	<button>Twitter</button>
	<button>Facebook</button>
	<button>はてなブックマーク</button>
	<button>Google+</button>
	<a href="/" data-rel="back" data-role="button" data-theme="a">キャンセル</a>
	</div>
</div>

ダイアログの最大幅を指定する

.ui-dialog .ui-header,
.ui-dialog .ui-content,
.ui-dialog .ui-footer{
	max-width:300px;
}

ダイアログ表示時のタイトルを変える

… 
<div data-role="page" id="pg-dialog" data-title="ダイアログテスト">
…
</div>
inserted by FC2 system