我正在根据提供的模板设置多页 jquery 移动页面： http://jquerymobile.com/demos/1.1.1/docs/pages/multipage-template.html
如何让页眉/页脚在所有页面上重复而不在页面内容中重复。
是否有一个 jquery 脚本或者我必须使用某种 php 包含文件？
提前致谢！
【问题讨论】：
标签： php jquery mobile jquery-mobile footer
您可以使用 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 事件，您将为时已晚，必须手动初始化标题小部件。
【讨论】：
pagebeforecreate 事件，根据文档：api.jquerymobile.com/pagebeforecreate 但是，我尝试了这两种方法都没有运气:(
alert("test")或console.log("test")语句没有任何效果。我尝试将上述函数放在我的代码中的不同位置，但无济于事。
据我所知，您必须在每个 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>
【讨论】：
为什么更多的 JS ？ ...而不是为页眉和页脚添加两个元素（“页眉”和“页脚”标签，或具有适当类的 div，但必须使用“位置：固定；”） - 并在页面 div 的顶部和底部添加填充? ...不需要JS代码...这将提高性能...虽然很少:) ...
【讨论】：
position:fixed 是一个需要设置的资源密集型属性（这会减慢重绘速度）。这两种性能差异很可能都很小。