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

我读过here，您无法在每个jqMobile页面上使用$(document).ready()。相反推荐使用pageInit()和pageCreate()。这一切都很好，但我不太清楚如何执行它。如何将页面特定的逻辑添加到jQuery Mobile？

比方说，我有一个所有导致单独报告的URL列表。每个报告都会在页面加载时发生各种各样的事情。

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

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

一个MVC3 Layout页面有我的头元素与所有脚本引用。

然后，我有我的索引页：

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

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

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

来源

2011-11-29 IronicMuffin

将所有的JavaScript在你的索引或什么都页加载第一 –

我喜欢在每个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>

注意，被包含在文档和我的自定义JavaScript（default.js）的<head> jQuery Mobile的是包含在页面不阻塞页面渲染的底部。

现在使用的$(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中出现问题。

来源

2011-11-29 17:58:57 Jasper

谢谢你，我会尝试了这一点。 – IronicMuffin

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

我认为这是因为您缺少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 
});

希望这有助于

来源

2011-11-30 10:17:58 Leon

谢谢你解决这个特定的部分，我会尝试添加，看看会发生什么。 – IronicMuffin

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

回答

相关问题