包括页眉和页脚在jQuery的移动多页面网站

我正在创建一个包含3页的jquery移动web应用程序，我的页眉/导航这些页面不会改变，但在所有的例子中，我见过的页眉和页脚被添加到每页。是否有可能只是为了加1个导航和1个页脚然后就切换页面进出这样的结构，主要内容是：包括页眉和页脚在jQuery的移动多页面网站

<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>

基本上是那里只是显示/隐藏的主要内容，并与无为的方式页眉和页脚？

对此有何意见将是巨大的凯尔

来源

2011-11-25 styler

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

这里是一个〔实施例：

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

这意味着，当某事点击一个ID为navigation它会调用load()函数并替换div的ID为page1机智h加载文件的内容。

来源

2011-11-25 14:21:57 ManseUK

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

见documentation

我会坚持到$ .mobile.changePage（），因为这需要照顾散列和很多其他活动，而不仅仅是使用jQuery .load（）新内容...

希望这有助于

来源

2011-11-30 10:56:07 Leon

这是jquery.mobile开发商的正确答案。 – sonjz

这应该是接受的答案。 –

你可以在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');

，会做的伎俩（这是我使用的）

你也可以对标题做同样的操作。

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

我希望这有助于你的目的

来源

2012-05-13 20:07:04 EMMNS

包括页眉和页脚在jQuery的移动多页面网站

回答

相关问题