Jquery Mobile允許相同的頁面轉換 - 彈出

Question

我有配置允許在我的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網絡應用程序中允許相同的頁面轉換。

如何解決？

Answer 1

您試圖代替pageinit改變它在錯誤的點，應該是mobileinit：

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

基本上任何改變全局設置必須經過mobileinit事件，它必須執行在jQuery Mobile初始化之前，請在此處閱讀更多內容：Working with jQuery Mobile's Auto-initialization。

所以，你應該初始化它是這樣的：

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

編輯：

然後，你需要欺騙了一下。首先，您必須瞭解jQM彈出窗口可能是bug最多的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移動版本1.3.1。