jquery-mobile - 将页面加载到 div jQuery Mobile

Question

我想通过单击 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>

Answer 1

$.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;
        });

此外，您正在加载的页面必须包含在 中。数据角色=页面 div(假设它有 id='secondPage')。加载后，触发 数据角色=页面与 id=secondPage 分区:

$('#secondPage").trigger('pagecreate');