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 Web应用程序中允许相同的页面转换。

如何解决？

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弹出窗口可能是最错误的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。

Jquery Mobile允许相同的页面转换 - 使用Popup

1 个答案: