使用jQuery Mobile在所有页面上保留navbar

Question

我目前正在使用jquery移动框架创建phonegap应用程序。

我有多个页面，像这样：

• index.html（全局布局）
• home.html（主页）
• settings.html（设置页面）
• ...

我想在每个页面上都有导航栏，并且在每个页面上保留它而不重复它（主页，设置......）我不知道为什么我不能这样做（比如包括header.html？或设置navbar在全球布局？）。 我使用页面之间的链接浏览我的应用程序

<a href="home.html" data-transition="slide">Home</a>

如何保留我的导航栏？

谢谢，

Answer 1

试试这篇文章，它会在所有页面上添加一个公共页脚，形成一个通用的html文件。

$('[data-role=page]').live('pageshow', function (event, ui) {
     $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){
           $("#" + event.target.id).find("[data-role=navbar]").navbar()
     });
});

有关更多信息，请参阅此文章 - 不同页面上的Jquery Mobile Same Footer

Answer 2

您必须在每个data-role="page"重复使用navbar元素。 喜欢这个Js Fiddle Work Out

或者按照dhaval的建议，通过ajax在每个页面上插入它：但除非有很多标签，否则你不会获得太多收益

Js Fiddle Work Out