Jquery Mobile:嵌入没有iframe的外部HTML文件

Question

如何在div中加载外部html页面？

<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel"> 
<!--Load nav.html here-->
</div> 
...

我尝试使用以下代码，但它不起作用。

$( "#myPanel" ).load( "nav.html" );

请参阅：http://plnkr.co/edit/N6xTrvLHWdOMG9Lq?open=lib%2Findex.html

Answer 1

该面板期望一些标记作为内容，而不是整个 HTML 页面。

这将在panel内加载您的导航listview：

$(document).on('panelcreate', '#myPanel', function () {
$(this).children(".ui-panel-inner").load("nav.html ul", function() {
$(this).enhanceWithin().trigger("updatelayout");
});      
});

全角listview需要一些额外的 CSS：

/* The left reveal panel shadow is 5px inset and blurred by 5px */
.ui-panel-display-reveal.ui-panel-position-left .ui-listview {
margin-right: -10px;
}

---

编辑：

要测试您的导航菜单并查看它是否按预期显示，您可以直接在panel内设计它。要允许框架创建panelInner，只需在panel div内放一些，即占位符div或者，如前所述，更好的是您的导航菜单的静态版本。因此，它将正确替换为您的外部版本。

一句话，而不是<!--Load nav.html here-->写<div>...</div>.