我想通过单击 jQuery Mobile 中的按钮为 div 容器加载另一个文件夹中的页面内容(例如:“files/pages/example.html”)!
怎么做?
<div data-role="page">
<div id="container" data-role="content"><button id="clickButton">Click me!</button></div>
</div>
我想通过单击 jQuery Mobile 中的按钮为 div 容器加载另一个文件夹中的页面内容(例如:“files/pages/example.html”)!
怎么做?
<div data-role="page">
<div id="container" data-role="content"><button id="clickButton">Click me!</button></div>
</div>
$.mobile.loadPage是您需要的方法。它允许您加载外部 html 文件并将其插入到 dom 中。此方法的默认设置是将其作为整个页面加载,因此您必须指定将其加载到 dom 元素中的选项。这是一个示例(未经测试)代码:
$('#clickButton').on("click",function(){
$.mobile.loadPage("theURLofThePage",{pageContainer: $('#container')})
});
现在,不要忘记跨域安全问题。我设法通过添加以下内容在 Firefox 中完成这项工作:
$("#landingPage").live('pageinit', function() {
jQuery.support.cors = true;
$.mobile.allowCrossDomainPages=true;
});
此外,您正在加载的页面必须包含在data-role=page div 中(假设它具有 id='secondPage')。加载后,在id=secondPage div的data-role=page上触发:
$('#secondPage").trigger('pagecreate');