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

如何解决？

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 回答