0

JQuery Mobile Web アプリで同じページ遷移を許可する構成があります。

$(document).on('pageinit', function(){
    $.mobile.changePage.defaults.allowSamePageTransition = true;
});

ドロップダウン/ポップアップ メニューで問題が発生します。

<a href="#page1" data-rel="popup" data-icon="grid" data-iconpos="notext">Option</a>

<div data-role="popup" id="page1">
    <ul data-role="listview" data-inset="true" data-theme="a">
        <li><a data-rel="dialog" href="#dialog1">Dialog 1</a></li>
        ...
    </ul>
</div>

問題は、ポップアップの外側をクリックするとページが空白になることです。構成を削除する$.mobile.changePage.defaults.allowSamePageTransition = true;と問題は解決しましたが、JQM Web アプリで同じページ遷移を許可したいと考えています。

修正方法は？

4

1 に答える 1

1

pageinitの代わりにmobileinitにする必要があります。

$(document).on("mobileinit", function(){
    $.mobile.changePage.defaults.allowSamePageTransition = true;
});

基本的に、グローバル設定への変更はすべて mobileinit イベントを通過する必要があり、jQuery Mobile が初期化される前に実行する必要があります。詳細については、jQuery Mobile の自動初期化の操作 を参照してください。

したがって、次のように初期化する必要があります。

<script src="jquery.js"></script>
<script>
    $(document).on("mobileinit", function(){
        $.mobile.changePage.defaults.allowSamePageTransition = true;
    });
</script>
<script src="jquery-mobile.js"></script>

編集 ：

次に、少しごまかす必要があります。まず、jQM ポップアップがおそらく最もバグの多い jQM ウィジェットであることを理解する必要があります。

問題を解決するには、ポップアップの外でタッチ/クリックしたときにポップアップが閉じないようにする必要があります (data-dismissible="false")。それを閉じるには、ポップアップの左上/右隅にテキストなしの閉じるボタンを追加する必要があります。

動作中の jsFiddle の例: http://jsfiddle.net/Gajotres/nAtfK/ オプション

<div data-role="popup" id="page1" data-dismissible="false">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
    <ul data-role="listview" data-inset="true" data-theme="b" style="min-width:210px;">
        <li data-role="divider" data-theme="a">Popup API</li>
        <li><a data-rel="dialog" href="#dialog1">Dialog 1</a></li>
    </ul>
</div>

編集2：

その他の解決策は、jQuery Mobile バージョン 1.3.1 に切り替えることです。

于 2013-04-26T07:51:22.697 に答える