ダイアログの作成
どのようなページでも、リンクのアンカー要素に data-rel=“dialog” という属性を付加することで、モーダル・ダイアログとして表示させることができます。この属性が指定された場合、フレームワークは自動的に周囲を角丸の枠で囲み、適度なマージンを入れ、背景を暗く落として、ページ上にダイアログが表示されている感じにします。
<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
切替効果
ダイアログも通常の「ページ」であり、開く際の効果は全てのページがそうであるように、スライドが用いられます。そして他のページと同様に、切り替えの効果を data-transition 属性により指定することが出来ます。よりダイアログらしくするには、切り替え効果として “pop” や “slideup” 、 “flip” などを指定することをお勧めします。
<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>
data-transition=“pop”
data-transition=“slidedown”
data-transition=“flip”
ダイアログを閉じる
ダイアログ上のリンクがクリックされた場合、フレームワークは自動的にダイアログを閉じて、リンク先ページへの遷移を行います。ダイアログ上に「キャンセル」ボタンを作るには、開いた元のページへのリンクを作り、属性として data-rel=“back” を指定してください。こうして作られた「戻る」リンクは、JavaScriptが動作しない端末でも有効です。
JavaScriptでリンクを作成する場合、リンクのhref属性には “#” を指定して data-rel=“back” を付加しても構いません。あるいは、ダイアログの close() メソッドを呼ぶことも可能です。例えば $(’.ui-dialog’).dialog(‘close’); のようになります。
「閉じる」ボタンのテキスト設定
ページプラグイン同様に、ダイアログボックスの閉じるボタンもdata属性により設定することができます。全てのダイアログに対してバインドするのであれば mobileinit イベントで $.mobile.dialog.prototype.options.closeBtnText プロパティの値を設定します。マークアップで行う場合は data-close-btn-text 属性にセットします。
「履歴」と「戻るボタン」の挙動
一般的な方法でダイアログを用いた場合、フレームワークはハッシュにダイアログページのURLを追加しません。これはつまり、ブラウザの履歴にダイアログページは含まれず、戻るボタンの挙動にも含まれないことを意味します。たとえば、あるページでダイアログを開き、そこから他のページへリンクで遷移したとします。そこでブラウザの「戻る」を押しても、ダイアログには戻らず、最初のページに遷移することになります。
スタイルとテーマ
ダイアログも、他のページ同様に異なったテーマのスタイルを適用できます。
ダイアログはオーバーレイ上に載せられて表示されます。このオーバーレイはデフォルトでスウォッチAでカラーリングされていますが、ページコンテナに data-overlay-theme 属性を指定することで変更することができます。次のダイアログは、スウォッチEのオーバーレイ上に配置されます。
また、ダイアログページはヘッダを取り除き、多くのボタンを配置することで、コントロールパネルのような使い方にすることもできます。
ダイアログの横幅と余白
読み易さのために、ダイアログにはデフォルトで max-width が500ピクセルで設定されています(加えて15ピクセルの padding が両サイドにあります)。更に margin-top に 10% が指定され、スクリーンサイズによって縦位置が調整されるようになっています。これらのスタイルを上書きするには、次のような記述を追加してルールを書き換えてください。
.ui-dialog .ui-header,
.ui-dialog .ui-content,
.ui-dialog .ui-footer {
max-width: 500px;
margin: 10% auto 15px auto;
}