jquerymobile html5で再利用可能なコードをサーバーサイドスクリプトなしで書く方法は？

Question

jquerymobile html5で再利用可能なコードをサーバーサイドスクリプトなしで書く方法は？

jquery mobileでファイルをインクルードできる方法はありますか？冗長なコードをどこにでも書くのではなく、いくつかのコードを再利用できるのですか？

すべてのページのように、ホームボタンと戻るボタンが必要です。ファイル内でこれらを指定してすべてのページに含める方法があります。私はjavascriptを使ってこれを行うのが難しい方法を知っています...どこにdiv = "ヘッダ"を入れて、後でコンテンツを追加するスクリプトを含めることができますか？

    <div id="bookHotels" data-role="page">

    <div data-role="header">

            -----   include the header file to to make it reusable ----

    </div><!-- /header -->

    <div data-role="content">   
    </div><!-- /content -->

    <div data-role="footer">
            footer text
    </div><!-- /footer -->
</div><!-- /page -->

どんな助けもありがとうございます...

3

追加された 27 10月 2011 〜で 05:57 著者 Kiran Ruth R

ビュー: 30

源

あなたはこれを行う良い方法を今まで見つけましたか？

追加された 28 11月 2012 〜で 09:24, 著者 farjam, 源

@farjam .....私は handlebarsjs.com を使い始めました...私は個人的にそれがテンプレート化のためにより良く働くことを発見しました

追加された 13 12月 2012 〜で 07:03, 著者 Kiran Ruth R, 源

2 答え

著者 Jasper · Answer 1 · 2011-10-27T06:38Z

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">Nav Item 1
Nav Item 2
Nav Item 3</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 -->

著者 jtblin · Answer 2 · 2013-03-11T02:54Z

ここではjsテンプレートの原則を使用してJasperの答えに基づいて私のために働いたソリューションです。 htmlが正しく拡張されていないため、その他の問題があるため、 'load'や同様のテクニクスを使用する同様の質問に対するその他の回答は正しく機能しません。

$(document).on('pagebeforecreate', function() {
   //use document so that it triggers for all new pages
   //use pagebeforecreate so that JQM can enhance the html after it is inserted in the DOM
   //use 'on' instead of 'live' as 'live' is deprecated and does not work in jQuery 1.9.1
   //$(this) is the current document here so have to use 'find' instead of 'children'
    $(this).find('[data-role="header"]').each(function() {
       //$(this) is now the header
       //if we have already inserted the html, we should not do it anymore
        if ($.trim($(this).html()) === "") $(this).html('<div data-role="navbar">Nav Item 1
Nav Item 2
Nav Item 3</div>');
    });
});