2

複数ページのドキュメントでナビゲーションバーを動的に作成しています。私の問題は、ナビゲーションバーがドキュメントの最初のページで拡張されていないことですが、奇妙なことに、他のすべてのページで拡張されています。キッカーは、この実際の最初のページの前にコードにページを追加し、「実際の」最初のページに転送するイベントを設定すると、すべてが正常に機能することです。ナビゲーションバーのコードは今のところどこでも同じです：

<div data-role="page" id="stdPage" data-theme="b">

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

    <div data-role="footer" data-position="fixed" data-id="persFooter">
        <div data-role="navbar">
            <ul>
                <li></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->

</div>

以下を使用して、すべてのページにナビゲーションバーを入力しています。

$(function () {
    $("div[data-role='navbar'] ul").empty();
    $("div[data-role='navbar'] ul").append("<li><a href=\"#stdPage\" data-icon=\"home\">Test</a></li>");
    $("div[data-role='navbar']").navbar();
});

これを行うとき、私が言ったように、最初のページのナビゲーションバー（すでに表示されているもの）は拡張されません。他のすべてのページには拡張ナビゲーションバーがあります。

.page（）やtrigger（ "pagecreate"）などをいじってみましたが無駄になりました。

どんな助けでも大いに感謝されるでしょう。

4

1 に答える 1

0

問題は、ブラウザがそのページを初めてロードしたときに「pageinit」イベントが発生したときに、ナビゲーションバーがページにある必要があることです。これは、jQ Mobile がページのコンテンツを拡張するときです。

最初のページで「pageinit」イベントが発生した後、ドキュメント全体にナビゲーションバーを追加しているようです。これが、他のページに移動すると「pageinit」が起動され、コンテンツが適切に強化される理由です。

試してみるべきことは、「mobileinit」イベントで共通ヘッダーをコピーするか、jQuery モバイルがロードされる前にコピーするか (使用しているスクリプトを jQ Mobile スクリプト タグの前に配置する)、またはヘッダーのマークアップを最初のページに配置してクローンをコピーすることです。 (.clone()) マークアップが強化された後、すべてのページに。

トリガーに関しては、適切な構文は次のとおり $(yourelement).trigger('create')です。

$(function () {
    $("div[data-role='navbar'] ul").empty();
    $("div[data-role='navbar'] ul").append("<li><a href=\"#stdPage\" data-icon=\"home\">Test</a></li>");
    $("div[data-role='navbar']").trigger('create');

});

幸運を！

フォローアップ： これが私がやった方法です。

最初のページである特定のページに共通にしたいヘッダーがありました。だから私はいつものようにそのフロントページのヘッダーを作りました. 他のページでは、プレースホルダー div にclass="commonHeader".

次に、「mobileinit」に次の命令を追加しました。

$(document).on('mobileinit', function(event){
        $('.commonHeader').each(function(index, element) { //attach common header to all pages
             $(element).replaceWith($('#frontPage [data-role="header"]').clone(true, true));     
        });
});

共通ヘッダーが必要なページだけで同じ方法を試してみてください。

于 2012-11-19T12:42:03.773 に答える