在JQuery Mobile中使用對話框

Question

我正在研究JQuery Mobile應用程序。我的每個.html文件基本上都有一個

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

我的每個頁面都會有幾個對話框與它關聯。因此，我認爲將這些對話框定義包含在與它關聯的頁面相同的.html文件中是有意義的。但是，我看到的所有JQuery Mobile文檔都有自己的.html文件中的對話框。

有沒有一種方法可以在同一個.html文件中定義一個對話框作爲典型的頁面？如果是這樣，那麼推薦的方法是什麼？我知道JQuery mobile使用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> 

對話框標記：

<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> 

欲瞭解更多信息請訪問http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-pages.html。

Answer 2

對於「pop」轉換，您可以將data-transition =「pop」添加到用於調用對話框的鏈接中。 F.E.

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