包括jquery mobile多页网站的页眉和页脚答案

【问题标题】：including the header and footer in jquery mobile multiple page site包括jquery mobile多页网站的页眉和页脚
【发布时间】：2011-11-25 13:00:18
【问题描述】：

我正在创建一个包含 3 个页面的 jquery 移动 Web 应用程序，这些页面的页眉/导航没有改变，但在所有示例中，我已经看到页眉和页脚添加到每个页面。是否可以只添加 1 个导航和 1 个页脚，然后像这样的结构切换页面主要内容：

<div id="header" data-role="header"></div>
<div id="page1" data-role="page">content</div>
<div id="page2" data-role="page">content</div>
<div id="page3" data-role="page">content</div>
<div id="footer" data-role="footer"></div>

基本上有没有办法只显示/隐藏主要内容而对页眉和页脚不做任何事情？

任何关于这方面的建议都会很棒凯尔

【问题讨论】：

标签： javascript jquery css mobile jquery-mobile

【解决方案1】：

不，很遗憾 JQM 不支持此功能（目前），您需要在获得的每个 role=page 上添加您的 role=header 和 role=footer（全部 3 个）。

见documentation

我会坚持使用 $.mobile.changePage()，因为它会处理散列和许多其他事件，而不仅仅是使用 JQuery 来 .load() 新内容...

希望对你有帮助

【讨论】：

【解决方案2】：

看看 jQuery 中的 load() 方法 -> http://api.jquery.com/load/

这是一个例子：

$('#navigation').click(function() {
   $('#page1').load('page1.html');
});

这意味着当点击 id 为 navigation 的东西时，它会调用 load() 函数并将div 替换为 id 为 page1 的内容。

【讨论】：

【解决方案3】：

你可以在 jQuery 中使用 .load()

例如，在每个页面中你都会有这个：

<div data-role="footer" class="ui-footer"></div>

现在构建这个函数：

function goTo(pageURL, transitionType) {
  $.mobile.changePage(pageURL, transitionType);
  $('.ui-footer').load('assets/includes/footer.html');
}

现在，当您在页面之间移动时，请尝试 onclick（如果您愿意，也可以从代码中）调用：

goTo('home.html','slideup');

这样就可以解决问题（这是我使用的）

你也可以对标题做同样的事情。

请记住，如果每个版本的应用程序（例如本地化）的页眉或页脚内容发生变化，您必须先调用它，然后填写本地化文本或其他任何内容。

我希望这对您的目的有所帮助

【讨论】：