2

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

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

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

提前致谢！

4

3 回答 3

3

您可以使用 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事件，那么您将为时已晚，并且必须手动初始化标题小部件。

于 2012-08-17T17:55:37.040 回答
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>

页脚.php：

<footer data-role="footer">
<<p>Footer content here</p>
</footer>
于 2012-08-17T16:21:51.677 回答
0

为什么更多的 JS ？...而不是为页眉和页脚添加两个元素（“页眉”和“页脚”标签，或具有适当类的 div，但必须使用“位置：固定；”） - 并在页面 div 的顶部和底部添加填充? ...不需要JS代码...这将提高性能...虽然很少:) ...

于 2013-05-28T15:44:36.563 回答