logo标签列表

Jquery Mobile 1.4在导航到其他页面后外部面板无法打开

javascriptjquerycssjquery-mobilecordova-3
4
我们正在使用jquery mobile和apache cordova开发一款移动应用程序。在迁移到jquery mobile 1.4.0后，我们切换到外部面板，但是面板存在问题。
在http://jsfiddle.net/Q58MZ/3/这个链接中有一个简单的问题示例。为了重现该问题，您必须进行以下步骤： 1.从菜单链接中点击页面1 2.从菜单链接中点击页面2 3.从菜单链接中点击页面1 4.从菜单链接中点击页面2 5.点击内容中的“转到页面1”链接
然后，菜单将不会打开，它将添加打开的类，但它不会打开。
以下是可重现该问题的示例代码：
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>  
    <script>
        $(document).ready(function() {
            $.mobile.defaultPageTransition = 'none';
            $("#mypanel").panel();
        });
        $(document).bind('panelbeforeopen', function(e, data) {
            console.log("before open");
        });
        $(document).bind('panelbeforeclose', function(e, data) {
            console.log("before close");
        });
    </script>
</head>
<body>
    <div data-role="panel" id="mypanel">
        <a href="#page1">page1</a>
        <br />
        <a href="#page2">page2</a>
    </div>
    <div data-role="page" id="page0">
        <div data-tap-toggle="false" data-role="header" >
            <a href="#mypanel">menu</a>
            <h1>PAGE 0</h1>
        </div>
        <div data-role="content"> 
            PAGE 0
        </div>
        <div data-tap-toggle="false" data-role="footer" >
        </div>
    </div>
    <div data-role="page" id="page1">
        <div data-tap-toggle="false" data-role="header" >
            <a href="#mypanel">menu</a>
            <h1>PAGE 1</h1>
        </div>
        <div data-role="content"> 
            PAGE 1
        </div>
        <div data-tap-toggle="false" data-role="footer" >
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-tap-toggle="false" data-role="header" >
            <a href="#mypanel">menu</a>
            <h1>PAGE 2</h1>
        </div>
        <div data-role="content"> 
            PAGE 2
            <a href="#page1">GO TO PAGE 1</a>
        </div>
        <div data-tap-toggle="false" data-role="footer" >
        </div>
    </div>
</body>

奇怪的是，当我通过面板链接导航时，面板可以正常工作，但是当我单击不在面板中的链接时，它就不再打开了。我们也尝试过使用$.mobile.changePage和新的:pagecontainer，但结果相同。如果有人遇到类似问题，请告诉我他是如何解决的。 谢谢。

$.mobile.defaultPageTransition = 'none'; 这行代码导致了这个问题，尽管它不应该。页面在面板关闭之前就已经改变了，太奇怪了。 - Omar
非常感谢你，你救了我的一天。 - Cvetan Himchev
Omar有没有其他方法可以禁用动画而不破坏面板？ - Cvetan Himchev
这是我正在处理的内容。在更改视图之前强制关闭面板。 - Omar
你完成后能否发布解决方案？ - Cvetan Himchev
3个回答
3

Omar说得对，当我移除$.mobile.defaultPageTransition = 'none';时，问题就解决了。

1
我使用jquery-mobile-1.4.1遇到了完全相同的问题，你是否找到了一种不需要启用动画的解决方案呢？谢谢。 - Marco Martinelli
目前我们没有它。尝试添加自定义动画并延迟，我认为这样就可以解决问题了。 - Cvetan Himchev
2

编辑：在jquery mobile 1.4.2中已经修复，详见https://github.com/jquery/jquery-mobile/issues/6650

感谢Cvetan的提示，我使用自定义动画成功解决了这个问题：

.dummy.in{}
.dummy.out{}
.in{-webkit-animation-timing-function: ease-out;-webkit-animation-duration: 0ms;-moz-animation-timing-function: ease-out;-moz-animation-duration: 0ms;}
.out{-webkit-animation-timing-function: ease-in;-webkit-animation-duration: 5ms;-moz-animation-timing-function: ease-in;-moz-animation-duration: 5ms;}

然后我告诉了jqm使用这个转换作为默认值：

$.mobile.defaultPageTransition = 'dummy';

就是这样，没有可见的页面过渡动画，完全可用的面板。

0
    <style type="text/css">
        .ui-panel-dismiss{display:none;}
        #p1, #p2{margin-left:17em;}
    </style>
    <script id="panel-init">
    $(function() {
        $( "body>[data-role='panel']" ).panel();
    });
            $(function(){$("#sidebar").panel();});
            $(document).on("pageshow", ":jqmData(role=page)", function() {you
                 $("#menu").panel("open");
    });
    </style>
请勿在您自己的回答中发表评论，您的评论应该是答案的一部分。 - Mike
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接