jQuery Mobile コンポーネントシリーズ #3 「ダイアログ」

第2回、jQuery Mobile コンポーネントシリーズ #2 「ページ切り替え効果」はこちら。

今回は、「ダイアログ」について紹介します。

指定方法

ダイアログの指定には２つの方法があります。

• アンカー指定型
• データロール指定型

アンカー指定型

アンカー指定型は、ダイアログを開くためのアンカーに「data-rel="dialog"」を指定しすることでダイアログとして認識させます。

<a href="#page-dialog" data-rel="dialog" data-role="button">アンカーダイアログ</a>

データロール指定型

データロール指定型は、ダイアログとして開かれるコンテナのデータロールに「data-role="dialog"」を指定することでダイアログとして認識させます。

<div id="dialog" data-role="dialog">
	<header data-role="header">
		<h1>ダイアログ</h1>
	</header>
	<div data-role="content">
		<p>データロール式ダイアログについて確認です。</p>
	</div>
</div>

サンプル

どちらもまったく同じように表示されます。

ダイアログを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

ダイアログの切り替え効果

ダイアログには切り替え効果が3つあります。

• pop
• slidedown
• flip

サンプル

ダイアログ切り替え効果を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

ソース

<div data-role="page">
	<header data-role="header">
		<h1>ダイアログ確認</h1>
	</header>
	<div data-role="content">
		<h2 id="toc-2">ダイアログタイプ</h2>
		<a href="#dialog" data-role="button">ダイアログ</a>
		<a href="#page-dialog" data-rel="dialog" data-role="button">アンカーダイアログ</a>
	</div>
</div>

<div id="dialog" data-role="dialog">
	<header data-role="header">
		<h1>ダイアログ</h1>
	</header>
	<div data-role="content">
		<p>データロール式ダイアログについて確認です。</p>
	</div>
</div>

<div id="page-dialog" data-role="page">
	<header data-role="header">
		<h1>アンカーダイアログ</h1>
	</header>
	<div data-role="content">
		<p>アンカー式ダイアログについて確認です。</p>
	</div>
</div>

ダイアログの構造

ダイアログは通常のページと同じようにヘッダー、コンテンツ、フッターと構造を作ることができます。
また、ヘッダーを無くし、画面の上部からでてきたようなMac風のダイアログにすることもできます。 data-transition="slidedown"を設定するとさらにそれっぽいです。

サンプル

ダイアログの構造を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

ソース

<div id="home" data-role="page">
	<header data-role="header">
		<h1>ダイアログの構造</h1>
	</header>
	<div data-role="content">
		<p>ヘッダー、コンテンツ、フッター</p>
		<a href="#dialog" data-role="button">ダイアログの構造</a>
		
		<p>ヘッダーなしの上付き型</p>
		<a href="#updialog" data-role="button" data-transition="slidedown">上付き型のダイアログ</a>
	</div>
</div>

<div id="dialog" data-role="dialog">
	<header data-role="header">
		<h1>ヘッダー</h1>
	</header>
	<div data-role="content">
		<p>コンテンツ</p>
	</div>
	<footer data-role="footer">
		<p>フッター</p>
	</footer>
</div>

<div id="updialog" data-role="dialog">
	<div data-role="content">
		<p>コンテンツ</p>
		<p><a href="#home" data-role="button" data-rel=“back”>閉じる</a></p>
	</div>
</div>

閉じる用のボタン

閉じる用のボタンは単純にリンクを作るだけでもできますが、 data-rel=“back”を設定することで、エフェクトにも対応してくれます。

<a href="#home" data-role="button" data-rel=“back”>閉じる</a>

また、ダイアログはブラウザの履歴には残らないため、ブラウザの戻るボタンを押してもダイアログが表示されることはないようです。

終わりに

今年はこの記事で最後になります。
今年の7月にスタートしたブログですが、思った以上にアクセスもあり2012年もどんどん更新していきたいと思います。
今年一年ありがとうございました。

来年もよろしくお願いします。それでは、よいお年を！