使用 jQuery Mobile 在所有页面上保留导航栏答案

【问题标题】：Keep navbar on all pages with jQuery Mobile使用 jQuery Mobile 在所有页面上保留导航栏
【发布时间】：2012-06-26 00:44:29
【问题描述】：

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

我有多个页面，像这样：

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

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

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

如何保留导航栏？

谢谢，

【问题讨论】：

查看我的回答：jsfiddle.net/ca11111/CxFWh/7 将根据导航栏字符串插入导航栏，您同样可以使用包含此字符串的 navbar.html 文件（在 jsfiddle 上不可行）

标签： jquery jquery-mobile navigation cordova

【解决方案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 on Different Pages

【讨论】：

太棒了！但是如何在保持页面持久性的同时做到这一点呢？喜欢this？
另外，navbar() 函数的用途是什么？

【解决方案2】：

您必须在每个data-role="page" 中重复导航栏元素。像这样Js Fiddle Work Out

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

Js Fiddle Work Out

【讨论】：