2

我正在尝试使用 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");

但是，当我这样做时，什么也没有发生。我尝试添加其他参数并使用不同的变体，但没有任何效果。根据我在其他地方读到的内容以及我看到的示例，这一行应该向我显示对话框，但它根本没有。我究竟做错了什么？

4

2 回答 2

3

使用这个片段

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

要使用按钮打开对话框，请参阅工作示例

<!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>
于 2012-11-17T20:24:49.723 回答
1

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

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

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

于 2012-11-19T12:38:30.613 回答