Jquery 移动设备：嵌入外部 HTML 文件而不使用 iframe

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，或者如前所述，更好的是您的导航菜单的静态版本。因此，它将被您的外部版本正确替换。

一言以蔽之，将写成<div>...</div>。

Jquery 移动设备：嵌入外部 HTML 文件而不使用 iframe

Jquery Mobile: Embed external HTML file without iframe

jquery-mobile