libro
www.tuyano.com
jQuery Mobileによるスマートフォン用Webサイト作成入門

基本的なGUIを使いこなそう (1/5)

作成:2011-05-25 08:07
更新:2012-03-29 10:16

■ダイアログページを使おう！

ごく普通のページを複数用意して切り替えるという基本は、前回でほぼできるようになりました。が、jQuery Mobileに用意されている表示は、ページだけではありません。非常に便利なものに「ダイアログ」があります。

HTMLでは、ダイアログというのはJavaScriptのalert関数などで表示されるようなものしかありません。これは単純なメッセージを表示するだけのもので、あまり本格的な表示を作ることはできませんね。ところがjQuery Mobileでは、非常に凝ったコンテンツをダイアログとして表示することができるのです。

実際に、簡単なダイアログを使ってみましょう。下のリスト欄にサンプルコードを掲載しておきます。ブラウザでアクセスし、「Dialog」というボタンをクリックしてみましょう。画面にダイアログが現れます。ダイアログのクローズボックス（×ボタン）をクリックすると、ダイアログが閉じ、もとのページ表示に戻ります。

最初に見たときはおそらく「おおっ」と思うでしょうが、よーく考えてみてば、これは別にダイアログが表示されているわけではなく、「ダイアログのようなデザインのページに切り替えている」だけだ、ということがわかるでしょう。が、それでも十分にダイアログ的な役割は果たしますし、利用する側としてはダイアログとして認識し操作できます。

ダイアログは、ページとして用意するタグの属性を変更するだけで作ることができます。ここでは２つのページタグが用意されていますが、ダイアログとして表示しているタグは以下のような形で書かれています。
<div id="dialog" data-role="dialog">
このように、data-role="dialog"と属性を指定するだけで、通常のページではなく、ダイアログとして表示されるようになるのです。実に簡単ですね。

ダイアログ利用のポイントは、ダイアログの表示作成よりも、実は「どうやってダイアログを表示させるか」にあるといってよいでしょう。ページ移動を行なっている<a>タグを見ると、このようになっていることがわかります。
<a href="#dialog" data-role="button" 
    data-rel="dialog" data-transition="pop">Dialog</a>
data-rel="dialog"という属性を指定すると、リンクの移動先がダイアログであることを知らせることができます。また、data-transition="pop"を指定することで、通常の表示切替で行うスライド効果ではなく、画面中央から次の画面が開くような視覚効果で表示を切り替えるようになります。

この２つの属性を用意することで、ダイアログは、よりダイアログらしく画面に現れるようになります。また閉じて前のページに戻る時の効果も、自動的にウインドウが中央に向けて縮小し閉じられるようになります。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

	<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>Sample</title>
		
	<link rel="stylesheet" 
		href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script type="text/javascript" 
		src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" 
		src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
	</head>
	
	<body>

		<div id="home" data-role="page">
			<div data-role="header">
				<h1>Hello</h1>
			</div>
			<div data-role="content">
				<p>jQuery Mobileサンプル。</p>
			<a href="#dialog" data-role="button" 
				data-rel="dialog" data-transition="pop">Dialog</a>
			</div>
		</div>
		
		<div id="dialog" data-role="dialog">
			<div data-role="header">
				<h1 id="dlog_title">Message</h1>
			</div>
			<div data-role="content">
				<p id="dlog_content">ダイアログです。</p>
			</div>
		</div>

	</body>
</html>
※関連コンテンツ

「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る