php - ページ全体でjqueryモバイルヘッダーを繰り返す

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>