jQuery Mobile:对所有页面使用相同的页眉

时间:2012-03-08 15:59:07

标签: jquery html css jquery-mobile

我正在尝试实现一些代码,这些代码将在我的所有网页上创建页眉和页脚,而不是对它们进行硬编码。我试过这个:

我在我的“主页”中有这个,我刚刚调用了包裹在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());

没有骰子。无论哪种方式都是对我应该怎么做的总猜测。还有更好的方法吗?

3 个答案:

答案 0 :(得分:9)

使用.load()可能有所帮助,然后只需将要包含的代码放入要链接的文件中。

$('.headerChild').load('pathto/headerProto.html')

如果您不想将数据保存在单独的文件中,另一种方法是: 我没有这样做,但通过一些快速研究,你也可以链接到文件中的元素。

$('.headerChild').load('pathto/mainPage.html #headerProto')

答案 1 :(得分:4)

归功于墨西哥流浪乐队。

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();
});

答案 2 :(得分:4)

我使用.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");  
});