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

要么

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