Question

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

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

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

提前致谢！

Answer 1

您可以使用JS（jQuery）创建模板，并在创建时将其附加到每个data-role="page"元素。

//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-title="Some Title"元素添加data-role="page"属性添加了对传递唯一标题的支持。

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

Answer 2

据我所知，您必须在每个data-role="page"容器中包含页眉和页脚。如果你不想避免为每个页面输入这个，那么我会require_once() PHP中包含页眉或页脚的页面，并使用它来代替每次写出页眉和页脚。

<强>示例：

<section data-role="page">
<?php require_once("header.php"); ?>

<div data-role="content">
<p>Hello world!</p>
</div>

<?php require_once("footer.php");?>
</section>

<强>的header.php：

<header data-role="header">
<h1>Title</h1>
</header>

<强> footer.php：

<footer data-role="footer">
<<p>Footer content here</p>
</footer>

Answer 3

为什么要更多JS？ ...而不是为页眉和页脚添加两个元素（“标题”和“页脚”标记，或具有适当类的div，但强制使用“position：fixed;”） - 并添加页面顶部和底部的填充divs ？ ......不需要JS代码......这将提高性能......虽然很少:) ...

jquery移动标题重复跨页

3 个答案: