We are developing an mobile application using jquery mobile and apache cordova. After migrating to jquery mobile 1.4.0 we switched to external panel but there is a problem with the panel.
There is a simple example of the problem in http://jsfiddle.net/Q58MZ/3/
To reproduce the problem you must: 1 click on page1 from the menu link 2 click on page2 from the menu link 3 click on page1 from the menu link 4 click on page2 from the menu link 5 click on "GO TO PAGE 1" link in the content
Then the menu wont open it will add classes that its open but it wont open.
Here is the sample code to reproduce it:
<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>
The strange thing is that when I navigate through the panel links the panel works but when I click to link that is not in the panel it wont open anymore. We tried also with $.mobile.changePage and the new one with the :pagecontainer but it is the same. If someone have similar problem please let me know how he fix it. Thanks in advance.
Omar is right the $.mobile.defaultPageTransition = 'none'; is causing the problem when I removed it everything works.
EDIT: It's fixed in jquery mobile 1.4.2, see https://github.com/jquery/jquery-mobile/issues/6650
Thanks to the hint from Cvetan I was able to solve this problem using a custom animation:
.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;}
Then I've told jqm to use this transition as default with:
$.mobile.defaultPageTransition = 'dummy';
And thats it, no visible page transition animation and a fully working panel.
<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>
来源：https://stackoverflow.com/questions/21722211/jquery-mobile-1-4-external-panel-do-not-open-after-navigating-to-other-page