Question

我们正在使用jquery mobile和apache cordova开发移动应用程序。迁移到jquery mobile 1.4.0后，我们切换到外部面板，但面板出现问题。

中有一个简单的问题示例

要重现问题，您必须： 1单击菜单链接中的page1 2从菜单链接中单击第2页 3单击菜单链接中的page1 4从菜单链接单击第2页 5点击＆＃34;转到第1页＆＃34;链接内容

然后菜单不会打开它会添加它打开的类但它不会打开。

以下是重现它的示例代码：

<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，但它是相同的。如果有人遇到类似问题，请告诉我他是如何解决的。提前致谢。

Answer 1

Omar是对的$.mobile.defaultPageTransition = 'none';导致问题，当我删除它一切正常。

Answer 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';

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

Answer 3

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

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

3 个答案: