2

固定フッターを取得する方法を尋ねているのではありません。

マルチページとシングルページの両方の構造があります。サイト全体で 1 つの HTML フラグメントのみを使用する方法を知りたいです。フッターを 1 か所だけ編集して、すべてのページで変更を確認したいので、解決策を本当に探しています。

ありがとう。

編集: PhoneGap でラップされるモバイル アプリケーションを開発しているので、クライアント側のソリューションを探しています。

解決策（@macoによる解決策をまとめて、私の場合に適応させます）：

$(function() {
// load the templates
$('body').append('<div id="module"></div>');
$('#module').load('templates/module.html :jqmData(role="page")',function() {

    // save the actual footer and header
    var hdhtml = $('#module :jqmData(role="header")').clone();
    var fthtml = $('#module :jqmData(role="footer")').clone();

    // removes the header/footer
    $(':jqmData(role="header")').remove();
    $(':jqmData(role="footer")').remove();

    // load at the correct place the header/footer
    $(':jqmData(role="page")').prepend(hdhtml).append(fthtml).page().trigger('pagecreate');

    // delete the temporary div
    $($(this).html()).replaceAll(this).attr('id', 'module');
});

// set the class "ui-btn-active" for the active page
$(document).live('pagecreate', function() {
    // get the current page
    var currentPage = window.location.pathname;
    currentPage = currentPage.substring(currentPage.lastIndexOf("/") + 1, currentPage.length).split("&")[0];

    // remove the class from the footer
    $($.mobile.activePage + ':jqmData(role="footer") li a')
            .removeClass('ui-btn-active ui-state-persist');

    // add the class to the link that points to the particular href
     $($.mobile.activePage + ':jqmData(role="footer") li a[href="' + currentPage + '"]').addClass('ui-btn-active ui-state-persist');

});
});
4

3 に答える 3

1

module.html

<!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>module header</h1>
            </div>
            <div data-role="footer" class="ui-bar">
                <h3>module footer</h3>
            </div>
        </div>
    </body>
</html>

module.js (すべてのページでこれを読み込みます)

function module() {
    var fthtml = $('#module :jqmData(role="footer")').clone();
    $(':jqmData(role="footer")').remove();
    $(':jqmData(role="page")').append(fthtml).page().trigger('pagecreate');
}

$(function(){
    $('body').append('<div id="module"></div>');
    $('#module').load('YOUR_module.html_PATH :jqmData(role="page")',function(){
        $($(this).html()).replaceAll(this).attr('id','module');
        module();
    });
    $(':jqmData(role="page")').live('pageinit',module);
});

YOUR_module.html_PATH (例: "../module.html"、"../module/module.html")

于 2012-07-02T14:52:53.910 に答える
0

部分的なフッタービューを作成し、必要な場所で呼び出すことでこれを解決しました:@Html.Partial("Footer")

于 2014-05-21T15:46:49.913 に答える
0

サーバー側で HTML ページを生成している場合は、サーバー言語 (php、java、node) のテンプレート機能を使用して、共通ファイルから HTML を挿入できます。

つまり、jsp の場合

    </div>
    <jsp:include page="scripts/footer.jsp" />
    .....
</body>

また、javascript で重い処理を行う場合は、javascript テンプレート エンジンを使用してください。すなわちhttp://handlebarsjs.com/

于 2012-07-01T06:21:35.277 に答える