使用jQuery Mobile在所有页面上保留导航栏 [英] Keep navbar on all pages with jQuery Mobile

问题描述

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

I'm currently creating phonegap app using jquery mobile framework.

我有多个页面，例如:

• index.html(全局布局)
• home.html(主页)
• settings.html (设置页面)
• ...

• index.html (global layout)
• home.html (home page)
• settings.html (settings page)
• ...

我想在每个页面上都有导航栏，并在每个页面(首页，设置...)上都保留它而不复制它，而且我不知道为什么我不能这样做(例如include header.html吗?或在全局布局中设置导航栏?). 我使用页面之间的链接浏览我的应用程序

I want to have the navbar on every page, and keep it without duplicate it on every page (home, settings...) and I don't know why I can't do that (like include header.html ? or set navbar in global layout ?). I browse in my app using link between pages

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

如何保存导航栏?

谢谢

推荐答案

尝试这篇文章，它将一个公共页脚附加到所有页面上，形成一个公共html文件.

Try this post, it appends a common footer to all the pages form a common html file.

$('[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在不同页面上的相同页脚

For more info refer this post - Jquery Mobile Same Footer on Different Pages

这篇关于使用jQuery Mobile在所有页面上保留导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！