Question

我正在尝试使用jQuery mobile创建一个简单的小部件。我有一个按钮，当我点击该按钮时，我想要一个显示日期提交表单的对话框。我在我的html中定义了一个div：

      <div data-role="dialog" id="DatePage" >
        <div data-role="content">
        <form>
                <input type="date" name="date" />
                <input type="submit"/>
        </form> 
        </div>
    </div>

现在，为了在单击按钮时显示此对话框，我一直在尝试使用以下代码行：

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

然而，当我这样做时，没有任何反应。我尝试添加其他参数并使用不同的变体，但没有任何作用。从我在其他地方读到的内容，以及我见过的例子中，这一行应该向我展示对话框，但它根本没有。我做错了什么？

Answer 1

使用此代码段

<button onClick="$.mobile.changePage('#DatePage', {transition: 'pop', role: 'dialog'});">Open Dialog</button>

使用按钮see working example

打开对话框

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Header</h1>
    </div><!-- /header -->

    <div data-role="content">
      <button onClick="$.mobile.changePage('#DatePage', {transition: 'pop', role: 'dialog'});">Open Dialog</button>
    </div>
  </div><!-- /page -->

  <div data-role="page" id="DatePage">
    <div data-role="content">
      <h1>My Dialog</h1>
      <form>
        <input type="date" name="date" />
        <input type="submit"/>
        <button data-rel="back">Close Dialog</button>
      </form>
    </div>
  </div><!-- /page -->

</body>
</html>

Answer 2

在我的最终解决方案中，对话框由以下代码段触发：

$ .mobile.changePage（'＃DatePage'，{transition：'pop'}）;

仅在首次单击按钮时才显示对话框的问题，因为首次显示对话框后，首页从未再次显示，单击任意两个按钮时对话框消失。可以看到该页面，因为它是对话框的背景，但它实际上从未出现过。为了避免这个问题，我使用了以下代码片段：

<!-- The popup dialog for date selection -->
    <div data-role="page" id="DatePage">

        <div data-role="content">               
            <form id="DateSubmissionForm">
                <input type="date" name="date" />
                <a href="#FrontPage" input-type="submit" data-role="button" class="ui-btn-left">Submit</a>
                <a href="#FrontPage" data-role="button"class="ui-btn-right">Cancel</a>
            </form>
        </div>
    </div>

“提交”和“取消”按钮实际上是返回首页的链接。使用此代码，首页真的再次显示，按钮再次可以点击。

如何显示带有changePage功能的对话框？

2 个答案: