Question

我已阅读here，您无法在每个jqMobile页面上使用$(document).ready()。相反，建议使用pageInit()和pageCreate()。这一切都很好，但我不太确定如何实施它。

假设我有一个网址列表，这些网址都会导致单独的报告。每个报告都会在页面加载时发生各种各样的事情。

我是否必须将所有页面逻辑放入主页面？

这是一个通用的问题，但我会给出一个我正在尝试做的具体例子。

MVC3 Layout页面包含我的head元素以及所有脚本引用。

然后我有我的索引页面：

<div data-role="page" data-add-back-btn="true">

<div data-role="content">
    <div class="content-primary">
        <ul data-role="listview" data-theme="a">
            <li data-role="list-divider" data-theme="a">Category 1</li>
            <li><a href="someUrl" data-transition="slideup">Link 1</a></li> 
        </ul>
    </div>
</div>

然后为我的报告单独登录页面：

<div data-role="page" data-add-back-btn="true">  
<div data-role="header" data-theme="a">
    <h1>Report 1</h1>
    <a id="btnOpts" data-icon="gear" class="ui-btn-right" data-rel="dialog" data-transition="pop">Options</a>
</div>

然后我的选项对话框有最后一页：

<div id="dlgOpts" data-role="page" data-theme="a">

<div data-role="content">

    <h2>Please select the report options:</h2>

    <div data-role="fieldcontain">
        <label for="startDate">Start Date:</label>
        <input type="date" id="startDate" data-role="datebox" data-options='{"mode": "datebox"}' />
    </div>

    <div data-role="fieldcontain">
        <label for="endDate">End Date:</label>
        <input type="date" id="endDate" data-role="datebox" data-options='{"mode": "calbox"}' />
    </div>

    <div class="ui-grid-a">
        <div class="ui-block-a"><a href="#" data-icon="back" data-role="button" data-rel="back">Cancel</a></div>
        <div class="ui-block-b"><a href="#" data-icon="check" data-role="button" data-rel="back">Ok</a></div>
    </div>
</div>

我的目标是从列表中加载报告，并在报告加载时显示选项对话框。如果我把它放在页面内部，它总是循环回到选项，因为它会在对话框关闭时触发（我想这是对它下面页面的完全重载？）。

简而言之：如何在我的报表页面加载时加载对话框，然后在选项对话框关闭时执行某些内容？在此先感谢您的帮助！

Answer 1

我喜欢在每个HTML文档的末尾包含我的网站范围的JavaScript，因此如果用户在网站的任何页面上刷新页面，那么JavaScript将加载并可用于该网站。我的结构看起来像这样：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>My Fancy Mobile Title</title>
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <link rel="stylesheet" type="text/css" href="library/css/default.css">

    <script src="//code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
    <div data-role="page" id="home">
        <div data-role="content">
            <!-- Content Here -->
        </div>
    </div>

    <script src="library/js/default.js"></script></script>

</body>
</html>

请注意，jQuery Mobile包含在文档的<head>中，我的自定义JavaScript（default.js）包含在页面底部，不会阻止页面呈现。

现在使用$(document).ready();的jQuery Mobile版本：

$('[data-role="page"]').live('pagecreate', function () {
    //code here will run each time a page is enhanced by jQuery Mobile, which will be once per page
});

$('[data-role="page"]').live('pageshow', function () {
    //code here will run each time a page is navigated to, which can be many times if the user navigates away and back
});

//you can also bind to specific pages
$('#home').live('pageshow', function () {
    //code here will run each time the `#home` page is shown
});

//you can bind to any selector that selects the `data-role="page"` elements
$('.page_element_class').live('pageshow', function () {
    //code here will run each time any page with the `.page_element_class` class is shown
});

另外要小心使用ID，因为它们必须在站点范围内是唯一的，如果两个页面具有相同ID的元素，则会导致问题，因为DOM中的页面将同时出现。

Answer 2

“它总是循环回到选项，因为它会在对话框关闭时触发（我想这是对它下面页面的完全重载？）。”

我认为这是因为你错过了A标签上的HREF属性 - 你试图打开的对话框的名称是什么？

<a id="btnOpts" data-icon="gear" class="ui-btn-right" data-rel="dialog" data-transition="pop">Options</a>

这可能是整个页面刷新的原因，而不是让JQM为您加载该对话框。一旦这样做，您可以使用@Jasper提供的建议，即

$("#dialogname").live("pagebeforeshow", function(e, data){
  // here you prepare your dialog contents
});

$("#dialogname").live("pagebeforehide", function(e, data){
 // here you finalize before your dialog disappears
});

希望这有帮助

如何向jQuery Mobile添加页面特定的逻辑？

2 个答案: