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
追加された
ビュー: 12
源
ro ru fr es pt de zh hi bn ar kk
あなたはこれを行う良い方法を今まで見つけましたか？
追加された 著者 farjam, 源
@farjam .....私は handlebarsjs.com を使い始めました...私は個人的にそれがテンプレート化のためにより良く働くことを発見しました
追加された 著者 Kiran Ruth R, 源

2 答え

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 -->
3
追加された
源
HTML5仕様の更新された <iframe> タグを思い出しました。これは seemless 属性を含み、私の答えに追加したリンクをチェックアウトします。
追加された 著者 Jasper, 源
いいえ、HTMLはありません5 PHPのようなものが含まれていますか？ ...私はこれらの2つの方法を認識しています...しかし、ちょうど興味があるのは少し変わったことをするJQueryの方法ではありません。それにもかかわらず、動作します...助けをありがとうジャスパー:) ...
追加された 著者 Kiran Ruth R, 源
クール...私はそれをチェック....
追加された 著者 Kiran Ruth R, 源
シームレスなiframeは、内容が向上しないのでうまく機能しません。このソリューションは、私にとってはそのままでは機能しませんでしたが、正しい方向に私を指摘しました。ありがとうございました！下に私のために働く解決策を掲載します。質問をしてから長い時間が経っていますが、それはまだJQMの問題です。これを行う正しい方法を理解するまでには時間がかかりました。
追加された 著者 jtblin, 源

ここでは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">
</div>');
    });
});
0
追加された
源