Dialog Widget

ページ・アンカー・リンクに data-rel="dialog" 属性を追加することにより、任意のページをモーダルダイアログとして表示することができます。 dialog” 属性が適用されると、フレームワークは角丸、ページ周囲のマージン、および “dialog” がページの上に浮かんでいるように見せるための暗い背景を追加するスタイルを追加します。mobile を使用します。changePage メソッドを呼び出します。

＜4953>推移

デフォルトでは、以下のようになります。 ダイアログは’pop’トランジションで開かれます。 他のページと同様に、リンクに data-transition 属性を追加することにより、ダイアログ上で任意のページ遷移を指定することができます。 よりダイアログらしくするために、「pop」、「slidedown」または「flip」の遷移を指定することをお勧めします。
可能な値は次のとおりです：fade、 pop、 flip、 turn、 flow、 slidefade、 slide、 slideup、 slidedown、 none。

Closing dialogs

ダイアログ内で任意のリンクをクリックした場合、ダイアログが通常のページのように自動的に終了し要求したページへと遷移します。 それにもかかわらず、ダイアログは、以下で「ダイアログの連結」で説明するように、連結することもできる。 同様に、ポップアップを開くリンクはダイアログをそのままにします。

If the dialog has a header, the framework will add a close button at the left side of the header.ダイアログにヘッダーがある場合、フレームワークはヘッダーの左側に閉じるボタンを追加します。 ダイアログコンテナに data-close-btn="right" を追加することによって、位置を変更することができます。 ヘッダーに閉じるボタンを表示したくない場合、またはカスタム閉じるボタンを追加する場合は、data-close-btn="none".

ダイアログで「キャンセル」ボタンを作成するには、ダイアログを開くきっかけとなったページにリンクし、リンクに data-rel="back" 属性を追加するだけです。 前のページにリンクするこのパターンは、JS 以外のデバイスでも同様に使用できます。

JavaScriptで生成されたリンクについては、単に href 属性を “#” に設定し、data-rel="back" 属性を使用することができます。 また、ダイアログの close() メソッドを呼び出すことで、プログラム的にダイアログを閉じることもできます。 $( ".ui-dialog" ).dialog( "close" ).

閉じるボタンのテキストを設定する

ページプラグインと同様に、オプションまたはデータ属性を通じてダイアログの閉じるボタンのテキストを設定することができます。 オプションは、mobileinit イベントにバインドして $.mobile.dialog.prototype.options.closeBtnText プロパティを選択した文字列に設定することによりすべてのダイアログに対して設定することができ、またはデータ属性 data-close-btn-text を配置してマークアップからテキストを設定することができます。

履歴 & 戻るボタンの動作

ダイアログは通常ページ内のアクションのサポートに使われるので、フレームワークはハッシュ状態の履歴追跡でダイアログを含めないようにします。 これは、戻るボタンがクリックされたときに、ダイアログがブラウズ履歴の年表に表示されないことを意味します。 たとえば、あるページにいて、リンクをクリックしてダイアログを開き、ダイアログを閉じてから別のページに移動する場合、その時点でブラウザの戻るボタンをクリックすると、ダイアログではなく最初のページに移動します。

Chaining Dialogs

Please note: あるダイアログで別のダイアログを開く (chain) 場合、data-rel="back" タイプのリンクで最後のものを閉じると、data-role="page" タイプのルートページに到達するまで常にその前のダイアログに移動します。 これはダイアログ間の一貫したナビゲーションを保証します。

スタイリング & テーマ設定

ダイアログは、ヘッダー、コンテンツ、フッター コンテナに data-theme 属性を追加して、他のページのように異なるテーマのスウォッチでスタイリングすることが可能です。 ダイアログ・コンテナに data-corners="false" を追加することにより、オプションの角を false に設定することができます:

ダイアログはオーバーレイ層の上に浮かんでいるように表示されます。 このオーバーレイは、デフォルトでスウォッチ ‘a’ コンテンツ色を採用しますが、data-overlay-theme 属性をページ ラッパーに追加して、オーバーレイを任意のスウォッチ文字に設定することが可能です。

ダイアログは、ダイアログの内部コンテナー要素から上部のマージンを削除するだけで、複数のボタンを提供するコントロール シートのように使用することも可能です。 例えば、ダイアログページが my-dialog のクラスを持っていた場合、そのダイアログを上部に固定するためにこの CSS を追加することができます。 .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 } または、そのスタイルを .ui-dialog .ui-dialog-contain { margin-top: 0 } ですべてのダイアログに適用できます。

ダイアログの幅とマージン

読みやすくするために、ダイアログはデフォルトで width 92.5% と max-width 500 ピクセルが設定されています。 また、10% top marginもあり、大きな画面ではダイアログの上部に大きなマージンを与えますが、スマートフォンでは小さなマージンに折りたたまれます。 ダイアログがコントロールシートとして使用される場合（上記参照）、コーナースタイルを隠すために、ダイアログの内側コンテナは15pxでtop側に移動されます。 これらのスタイルをオーバーライドするには、スタイルシートに以下のCSSオーバーライドルールを追加し、必要に応じて微調整してください。