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

Question

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

我有多个页面，如下所示：

• 索引.html（全局布局）
• 主页.html （主页）
• 设置.html（设置页面）
• 。

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

<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 不同页面上的相同页脚

Answer 2

必须在每个data-role="page"中重复导航栏元素。像这样 Js 小提琴锻炼

或者按照 Dhaval 的建议，通过 ajax 将其插入到每个页面上：但除非你有很多选项卡，否则你不会获得太多

Js 小提琴锻炼