[英]jQuery Mobile: Use same header footer for all pages
我正在尝试实现一些代码,这些代码将在我的所有网页上创建页眉和页脚,而不是硬编码。 我试过这个:
我在我的“主页”中有这个我刚刚调用包裹在div中我想要的标题。
<div id="headerProto">
<div data-role="header" data-position="fixed" data-theme="b">
<h1> Title </h1>
</div>
</div>
然后在我的其他页面中:
<div class="headerChild">
</div>
我补充说:
$(".headerChild").html($("#headerProto").html());
没有骰子。 无论哪种方式都是对我应该怎么做的总猜测。 有没有更好的办法?
使用.load()可能有所帮助,然后只需将要包含的代码放入要链接的文件中。
$('.headerChild').load('pathto/headerProto.html')
如果您不想将数据保存在单独的文件中,另一种方法是:我没有这样做,但是通过一些快速研究,您还可以链接到文件中的元素。
$('.headerChild').load('pathto/mainPage.html #headerProto')
归功于墨西哥流浪乐队。
http://forum.jquery.com/topic/jquery-mobile-fixed-header-and-footer-on-page-transition
我只是粘贴他的解决方案。
1.)包装你的data-role =“header”并输入id =“constantheader-wrapper”。
移动sidor
如果你想在头文件包装器中使用div,但是尝试在这种情况下使用完整的渲染头输出,否则在重新加载页面时它将失去样式。 注意! 将标题放在第一页中,然后此方法只将标题html添加到所有其他页面。
2.)将函数放在文件或内联脚本中:
jQuery.fn.headerOnAllPages = function() {
var theHeader = $('#constantheader-wrapper').html();
var allPages = $('div[data-role="page"]');
for (var i = 1; i < allPages.length; i++) {
allPages[i].innerHTML = theHeader + allPages[i].innerHTML;
}
};
3.)从文档就绪调用函数,例如:
$(document).ready(function() {
$().headerOnAllPages();
});
我用.clone()
在我的多页jQuery Mobile项目中,我的主页上有一个标题:
<div data-role="header" data-id="header" class="ui-header ui-bar-b" role="banner" id="headerMaster">
<a href="#my-menu">Menu</a>
<h1 class="ui-title" role="heading" aria-level="1">My Header</h1>
</div>
在所有后续页面(或具有data-role = page的div)中我有:
<div class="headerChild">
</div>
然后在pageinit上克隆主人并附加到所有孩子:
$(document).delegate("#index", "pageinit", function () {
$("#headerMaster").clone().appendTo(".headerChild");
});
编辑:如果pageinit不适合您,请尝试pagebeforecreate事件
$(document).delegate("#index", "pagebeforecreate", function () {
$("#headerMaster").clone().appendTo(".headerChild");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.