HTML( .html
)ページを使用していて、サーバー側インクルードが接続されていない場合は、JavaScriptテンプレートを使用できます(それほど難しくありません)。 JavaScriptを使用したテンプレート作成のメリットは、転送中のワイヤーオーバーデータが少ないため、ページがより高速にダウンロードされることです。同じことを何度も何度も再コーディングしているとテンプレートを使用することをお勧めします。
jQuery Mobileでページを作成したときに各ページのヘッダーにコンテンツを追加する例を次に示します。
$('[data-role="page"]').live('pagecreate', function() {
var $header = $(this).children('[data-role="header"]');
$header.html('<div data-role="navbar"></div>').trigger('create');
});
Another option is to use <iframe>
tags with the seemless
attribute (added in the HTML5 specification). Here is a doc link: http://www.w3schools.com/html5/tag_iframe.asp
Seemless:iframeがその部分のように見えるように指定します。
<div data-role="header">
<iframe seemless="seemless" src="/path/to/header.html"></iframe>
</div><!-- /header -->