Question

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

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

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

我想在每个页面上都有导航栏，并且在每个页面（主页，设置......）上保留它不会重复，我不知道为什么我不能这样做（比如包括header.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 Same Footer on Different Pages

Answer 2

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

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

Js Fiddle Work Out

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

2 个答案: