jquery移动标题重复跨页 [英] jquery mobile header repeat across pages

问题描述

我正在根据提供的模板设置多页jquery移动页面：
http://jquerymobile.com/demos/1.1.1/docs/pages/multipage-template.html

I'm setting up a multi-page jquery mobile page based on the provided template: http://jquerymobile.com/demos/1.1.1/docs/pages/multipage-template.html

如何在所有页面上重复页眉/页脚而不在页面内容中重复它。

How can I get the header/footer to repeat on all the pages without duplicating it in the page content.

是否有一个jquery脚本，或者我是否必须使用某种php包含文件？

Is there a jquery script for this or do I have to use some kind of php include file?

提前致谢！

推荐答案

您可以使用JS（jQuery）制作模板并将其附加到每个数据角色=page正在创建的元素。

You can use JS (jQuery) to make a template and append it to each data-role="page" element as it's being created.

//create template, notice the "{TITLE}" place-holder for dynamically adding titles
var myHeaderHTML = '<div data-role="header" data-id="my-header" data-position="fixed"><h1>{TITLE}</h1></div>';

//create delegated event handler for the "pagecreate" event for all pseudo-pages
$(document).on('pagecreate', '[data-role="page"]', function () {

    //get the title of this page, if none is given then use a generic title
    var title = $(this).data('title') || 'Some Generic Title';

    //add the header to this pseudo-page
    $(this).append(myHeaderHTML.replace('{TITLE}', title));
});​

这是一个演示： http://jsfiddle.net/vmMVj/

这会追加一个固定的标题到正在创建的每个页面。我通过在 data-role =page中添加 data-title =Some Title属性，添加了对传递唯一标题的支持元素。

This will append a fixed header to every page as it is being created. I added support for passing a unique title by adding a data-title="Some Title" attribute to the data-role="page" element.

请注意，我选择了 pagecreate 事件，因为它发生在伪页面时即将被初始化。如果您要绑定到 pageinit 事件，则为时已晚，必须手动初始化标题窗口小部件。

Note that I chose the pagecreate event because it occurs when the pseudo-page is about to be initialized. If you were to bind to the pageinit event, you'd be too late and have to initialize the header widget manually.

这篇关于jquery移动标题重复跨页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！