JQuery Mobileでダイアログを使用する

Question

私はJQuery Mobileアプリケーションを開発中です。私の各.htmlファイルは基本的には

<div id="myPage" data-role="page"> 
    <!-- My Content --> 
</div> 

です。私の各ページには、関連するいくつかのダイアログがあります。このため、これらのダイアログ定義は、関連付けられているページと同じ.htmlファイルに含めることが理にかなっていると考えました。しかし、私が見るすべてのJQuery Mobileドキュメントには、ダイアログが独自の.htmlファイルに含まれています。

一般的なページと同じ.htmlファイル内にダイアログを定義する方法はありますか？もしそうなら、推奨されるアプローチは何ですか？私は、JQueryモバイルがDOMを使ってスマートなものを作っていることを知っています。そのため、私は私がしなければわからない：

<div id="myPage" data-role="page"> 
    <!-- My Content --> 

    <div id="myDialog" data-role="page" data-rel="dialog"> 
    <!-- My Dialog Conent --> 
    </div> 
</div> 

OR

<div id="myPage" data-role="page"> 
    <!-- My Content --> 
</div> 

<div id="myDialog" data-role="page" data-rel="dialog"> 
    <!-- My Dialog Conent --> 
</div> 

それでも、私は、プログラムのダイアログを開くするかどうかはわかりません。私はここでベースオフですか？

Answer 1

あなたは同じページにダイアログを含めることができます。例えば

<div data-role="page"> 
     <div id="content" data-role="content"> 
      <a href="#dialog1" id="some-dialog" data-rel="dialog" data-role="button">Open Dialog</a> 
     </div> 
    </div> 

ダイアログマークアップ：より多くの情報訪問のためにhttp://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-pages.html

<div data-role="dialog" id="dialog1" class="app-dialog"> 
     <div data-role="header"> 
      <h3>A dialog</h3> 
     </div> 
      <div id="content" data-role="content"> 
        <p>I am a dialog....!</p> 
     </div> 
    </div> 

。

Answer 2

"ポップ"トランジションでは、ダイアログを呼び出すために使用するリンクにdata-transition = "pop"を追加します。 F.e.

<a href="#dialog1" data-icon="info" data-rel="dialog" data-transition="pop">Help</a>