Jquery Mobile 允许同一页面转换 - 带有弹出窗口答案

【问题标题】：Jquery Mobile Allow Same Page Transition - with PopupJquery Mobile 允许同一页面转换 - 带有弹出窗口
【发布时间】：2013-04-26 07:43:12
【问题描述】：

我的配置允许在我的 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 网络应用程序中允许相同的页面转换。

如何解决？

【问题讨论】：

标签： jquery jquery-mobile jquery-mobile-popup

【解决方案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。

【讨论】：