以编程方式在JQuery Mobile中打开一个对话框

Question

我有一个.html文件,看起来类似于以下内容:

<div id="myPage" data-role="page">
  <div data-role="header">
    <a href="#" data-icon="arrow-l" data-iconpos="notext" class="ui-btn-left jqm-home" onclick="backButton_Click();">Back</a>
    <h1>My App</h1>
  </div>

  <div>
    <input id="saveButton" type="button" value="Save" onclick="doStuff()" />
  </div>

  <script type="text/javascript">
    function doStuff() {
      var updatedText = getUpdatedText();
      $("#myMessage", "#myDialog").html(updatedText);                    
      $.mobile.changePage("#myDialog", { role: "dialog" });      
    }
  </script>
</div>

<div id="myDialog" data-role="page">
    <div id="myMessage"></div>
    <input id="button1" type="button" value="Button 1" data-theme="b" onclick="someJS1();" />
    <input id="button2" type="button" value="Button 2" data-theme="c" onclick="someJS2();" />
</div>

当调用"doStuff()"时,我想在对话框的文本中设置自定义消息并打开对话框.出于某种原因,我无法打开myDialog.对于我的生活,我无法弄清楚我做错了什么.我查看了此处发布的内容:http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-pages.html

Answer 1

我认为你需要将页面的角色设置为对话框

<div id="myDialog" data-role="dialog">
    <div id="myMessage"></div>
    <input id="button1" type="button" value="Button 1" data-theme="b" onclick="someJS1();" />
    <input id="button2" type="button" value="Button 2" data-theme="c" onclick="someJS2();" />
</div>

然后打开对话框

$.mobile.changePage("#myDialog");

见小提琴http://jsfiddle.net/kYsVp/2/