Question

我正在创建一个包含3个页面的jquery移动网络应用程序，这些页面的标题/导航没有改变，但在所有示例中，我看到页眉和页脚被添加到每个页面。是否可以只添加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>

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

对此的任何建议都会很棒凯尔

Answer 1

不，不幸的是JQM不支持这个（还），你需要在你所拥有的每个角色=页面上添加你的role = header和role = footer（所有3个）。

请参阅documentation

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

希望这有帮助

Answer 2

查看jQuery中的load()方法 - ＆gt; http://api.jquery.com/load/

这是一个例子：

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

这意味着当点击ID为navigation的内容时，它会调用load()函数，并将div的id page1替换为{{1}}的内容。加载文件。

Answer 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');

可以做到这一点（这就是我使用的）

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

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

我希望这有助于您的目的

包括jquery移动多页面网站中的页眉和页脚

3 个答案: