ポップアップウィジェットと似た機能「ダイアログ」
ポップアップウィジェットと似た機能としてダイアログがあります。これはjQuery Mobile 1.2.0登場前からあった機能です。ダイアログもリンクをタッチするとポップアップと同じように中央に飛び出す形でメッセージなどを表示することができます。
違いとしては、ポップアップはポップアップ部分の外をタッチすれば消すことができますが、ダイアログはダイアログを消すボタンやリンクをタッチしなければ消すことはできません。また、ポップアップは今まで表示されていたコンテンツが背景に表示されるのに対し、ダイアログは表示されません。特に重要なメッセージを出したい場合は、ダイアログの方がより強調されます。
ダイアログを表示した画面は以下のとおりです。
パソコンで見るとこうした形になります。
先程のポップアップウィジェットをダイアログに変更したサンプルスクリプトを示します。
<!DOCTYPE html> <html> <head> <meta charset=UTF-8" /> <!--1.スマートフォン画面での表示方法指定--> <mata name="viewport" content="width=device-width,initial-scale=1"> <title>jQuery Mobileサンプル（ダイアログ表示）</title> <!--2.CSSの読み込み--> <link rel="stylesheet" type="text/css" href="./mobile/jquery.mobile-1.3.0.min.css" /> <!--3.jQueryの読み込み--> <script language="javascript" type="text/javascript" src="./Scripts/jquery-1.9.1.min.js"></script> <!--4.jQuery Mobileの読み込み--> <script language="javascript" type="text/javascript" src="./mobile/jquery.mobile-1.3.0.min.js"></script> </head> <body> <!--5.ページの設定--> <div data-role="page" id="page0" data-theme="b"> <!--6.ヘッダーの設定--> <div data-role="header" data-theme="b"> <h1>jQuery Mobileサンプルページ（ダイアログ表示）</h1> </div> <!--7.ページ内容の設定--> <div data-role="content"> <a href="#dialogsample" data-rel="dialog"><b>ここをタッチ！</b></a></p> </div> <!--8.フッターの設定--> <div data-role="footer" data-theme="b"> <h3>Codezine</h3> </div> </div> <!--9.ダイアログの設定--> <div data-role="page" id="dialogsample"> <div data-role="header"> <h1>ダイアログ</h1> </div> <div data-role="content"> 旧来機能のダイアログ</p> <a href="#" data-rel="back">戻る</a></p> </div> </div> </body> </html>
7.ページ内容の設定のリンクでは「a href="#dialogsample" data-rel="dialog"」と記述し、その後の9.ダイアログの設定で指定されているID「dialogsample」を指し、「data-rel="dialog"」でダイアログとして表示することを指定します。
9.ダイアログの設定では、「div data-role="page" id="dialogsample"」と記述し、「data-role」で指定される属性は「page」となるので、新たに別のページを呼び出す形です。ヘッダー部分には自動的に戻るボタンが表示され、それをタッチすれば元のコンテンツに戻ります。また、「<a href="#" data-rel="back">戻る</a></p>」といった形で記述した戻るリンクによっても、元のコンテンツに戻ることができます。
表示したい内容によって、ポップアップとダイアログを使い分けてみるのも良いでしょう。
