1

「ページ」（ data-role="page"アイテム）にリンクするボタンを備えた、ヘッダーに永続的なナビゲーションバーを持つ非常に単純なjQueryモバイルページがあります。

すべてがうまく機能し、ページからページに移動すると、ナビゲーションバーのボタンが強調表示されます.

私の問題は、これらのナビゲーション バーをサーバー側 (PHP) で動的に生成したいということです。しかし、ajax を使用してナビゲーション バーを追加すると、ui-btn-activeクラスとui-state-persistクラスが正しく機能せず、ボタンが期待どおりに強調表示/保持されないようです。

ナビゲーションバーが定義されたページがあるとします。

<div data-role="page" id="settings" data-theme="a">

私が示すことができる最も簡単な例は、次のようにコンテンツを置き換えることです:

var htmlContent = $("#settings").html();
$("#settings").html(htmlContent);

これを行うと、ボタンがアクティブな状態を保持しなくなります。ナビゲーションバーがjQueryの認識から「切断」されたようで、DOMなどを再同期する必要があります。

興味深いことに、ナビゲーション バー自体も適切に保持されているとは思えません。コンテンツを置換した後は遷移しませんが、置換されたページのページ コンテンツはナビゲーション バーの後ろに表示されます(したがって、以下のサンプルではすべての br が表示されます)。

男、これが理にかなっていることを願っています:)

これが私の全体のサンプルです... head タグ内：

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<script type="text/javascript" charset="utf-8">

function loadSomeHTML() {
    var htmlContent = $("#settings").html();
    $("#settings").html(htmlContent); 
}

</script>

body タグの内容は次のとおりです。

    <div data-role="page" id="welcome" data-theme="a">
    <div data-role="header" data-position="fixed" data-id="TestPersist">
        <div data-theme="" data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#schedule" id="navbar_schedule" data-theme="" data-icon="grid" class="navlink">
                        Schedules
                    </a>
                </li>
                <li>
                    <a href="#settings" id="navbar_settings" data-theme="" data-icon="gear" class="navlink">
                        Settings
                    </a>
                </li>
            </ul>
        </div>
    </div><!-- /header -->
    <div data-role="content" data-theme="">
        This is the welcome page
    </div><!-- /content -->
</div>

<div data-role="page" id="schedule" data-theme="a">
    <div data-role="header" data-position="fixed" data-id="TestPersist">
        <div data-theme="" data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#schedule" id="navbar_schedule" data-theme="" data-icon="grid" class="navlink ui-btn-active ui-state-persist">
                        Schedules
                    </a>
                </li>
                <li>
                    <a href="#settings" id="navbar_settings" data-theme="" data-icon="gear" class="navlink">
                        Settings
                    </a>
                </li>
            </ul>
        </div>
    </div><!-- /header -->
    <div data-role="content" data-theme="">
        This is the sched page
        <input type="button" value="Replace content in settings page" onclick="loadSomeHTML();">
    </div><!-- /content -->
</div>

<div data-role="page" id="settings" data-theme="a">
    <div data-role="header" data-position="fixed" data-id="TestPersist">
        <div data-theme="" data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#schedule" id="navbar_schedule" data-theme="" data-icon="grid" class="navlink">
                        Schedules
                    </a>
                </li>
                <li>
                    <a href="#settings" id="navbar_settings" data-theme="" data-icon="gear" class="navlink ui-btn-active ui-state-persist">
                        Settings
                    </a>
                </li>
            </ul>
        </div>
    </div><!-- /header -->
    <div data-role="content" data-theme="">
        <br><br><br><br><br><br><br>This is the settings page
    </div><!-- /content -->
</div>
4

1 に答える 1

1

たくさんのヘッダーを作成しないでください :)

jqmはデータ属性を動的に更新するのが難しいことで知られていますが、それほど悪くはありません。

興味のある方のためのハックがあります - ui-btn-active クラスをドロップしてテーマ (もちろんカスタマイズ可能) を使用する意思がある限り、約 2 分でこれを起動して実行できます.

必読: http://jquerymobile.com/test/docs/buttons/buttons-options.html

明らかに、これを機能させるには、動的コンテンツの上に静的ページとして yr ヘッダー テンプレート/マークアップを含める必要があります。非動的コンテンツ用に php を含めるのではなく、これがあなたがやりたいことだとあなたの質問から推測しています。その場合、ソリューションはより明白なサーバー側のソリューションになります。

とにかく

サンプル navbar リンクの html マークアップ

<li><a href="javascript:;" id="nav_billing" class="panes" rel="#billing" data-role="button" data-theme="b" data-icon="minus" data-iconpos="right">Billing Info</a></li>
<li><a href="javascript:;" id="nav_shipping" class="panes" rel="#shipping" data-icon="minus" data-role="button" data-iconpos="right">Shipping Info</a></li>
<li><a href="javascript:;" id="nav_payment" class="panes" rel="#checkout" data-icon="minus" data-role="button" data-iconpos="right">Payment Info</a></li>

ここで重要なことは、アクティブなクラス、つまり ui-btn-active を割り当てる代わりに、データテーマをアクティブなクラスに割り当て、確実に data-role="button" を追加していることです。各リンクも:)

ドキュメントの最後にある部分については、次のとおりです。

$( document ).bind( "mobileinit", function(){
$.mobile.button.prototype.options.initSelector = ".panes";
});

はい、ここで行っているのは、これらのボタンを自動的に初期化することだけなので、次のようなものを使用できます。

$('a').buttonMarkup({ theme: "a" });

残りはクリッカーを組み立てるだけです（ on.click 関数に注意してください）：

// 100% untested and sure to not work as is 
$(".panes").on('click', function () {

// turn our clicked link into theme b aka active
$(this).buttonMarkup({ theme: "b" });

// works nice with icons too
$(this).buttonMarkup({ icon: "check" });

// grab all sibling links and turn them to theme a
// this probably won't work without accounting for the actual markup :)
$(this).siblings().buttonMarkup({ theme: "a" }); 

});
于 2012-11-08T10:24:40.330 に答える