0

私は JQuery Mobile を初めて使用し、かなり大きなモバイル Web サイト (15 ページ以上) を構築する必要があります。私の問題は、JQuery Mobile でテンプレートを作成する方法がわからないことです。例: たとえば、すべてのページにすべての JavaScript および CSS インクルードを含めたくありません。すべてのページが参照するテンプレートが必要なので、新しいインクルードを追加する必要がある場合は、このテンプレートに追加するだけです.

私は ASP.NET のバックグラウンドを持っているので、ASP.NET ではマスター ページを作成するだけですが、JQuery Mobile html ページではこれに相当するものを見つけることができません。

前もって感謝します。

編集: PhoneGap/Cordova で JQuery Mobile を使用しています。

4

2 に答える 2

0

Phonegap を使用している場合は、すべての HTML を 1 つのファイルに入れることもできます (リンクは ID セレクター - href="#contact" になります)。

次に、いくつかの基本的なテンプレートを作成するために、実行時に HTML フッター、ヘッダー、およびサイドバーを各ページにコピーすることにより、ページ間でヘッダー、フッター、およびサイドバー HTML を再利用する Phonegap/JQM アプリに現在取り組んでいます。

したがって、私のhtmlは次のようになります。

<!-- reusable content - this is added to pages using JS -->

<div style="display:none">

    <div data-role="header" data-position="fixed" class="mainheader" data-id="mainheader">
        <h1>App Name/h1>
    </div><!-- /header -->

    <div data-role="footer" data-position="fixed" data-id="mainfooter">
        <div data-role="navbar" class="main-nav">
            <ul>
                <li><a href="#contact" data-parent="contact">Contact</a></li>
                ...
            </ul>
        </div>
    </div><!-- /navbar -->

    <div data-role="panel" class="sidebar" data-position="left">
        <!-- sidebar content -->
    </div>
</div>

<!-- /end of reusable content -->


<div id="cars" class="content-page" data-role="page">

    <!-- header gets added here -->

    <div data-role="content">
        <!-- page content would go here -->
    </div>

    <!-- footer and sidebar get added here -->

</div>

私のJSでは次のようになります。

initializeReusableContent : function () {
    //make sure the panels and nav bar are on each page
    var header, footer, sidebar;

    header = $('.mainheader').remove();
    footer = $('.footer').remove();
    sidebar = $('.sidebar').remove();

    $(".content-page[data-role=page]").prepend(header).append(footer).append(sidebar);
},

その後、コンテンツ テンプレートにhttps://github.com/janl/mustache.jsのようなものを使用できます。

より複雑なニーズがある場合は、テンプレート言語 (Backbone、Angular など) の方がよいでしょう。

于 2013-09-03T13:15:15.997 に答える