Sometimes persistent footer also moves during page transition in jquerymobile
This is the html code I have
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script>
$('#home, #page2, #page3').live('pagebeforeshow',function(event){
$('#' + $(this).attr('id') + '_link').addClass('ui-btn-active');
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
Home Page
</div>
<div data-role="footer" data-position="fixed" data-id="pFooter">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="custom" class="ui-btn-active" id="home_link">Home</a></li>
<li><a href="#page2" data-icon="grid">Second page</a></li>
<li><a href="#page3" data-icon="star">Third page</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
Second page
</div>
<div data-role="footer" data-position="fixed" data-id="pFooter">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="custom">Home</a></li>
<li><a href="#page2" data-icon="grid" class="ui-btn-active" id="page2_link">Second page</a></li>
<li><a href="#page3" data-icon="star">Third page</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
Third page
</div>
<div data-role="footer" data-position="fixed" data-id="pFooter">
<div data-role="navbar">
<ul>
<li>开发者_如何学JAVA<a href="#home" data-icon="custom">Home</a></li>
<li><a href="#page2" data-icon="grid">Second page</a></li>
<li><a href="#page3" data-icon="star" class="ui-btn-active" id="page3_link">Third page</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
The problem I am facing is that sometimes when i change selection of navbar,the footer also slides to the left or right along with the page.You can reproduce the issue by constantly changing the selection of button in the navbar.
You can see it here - http://jsfiddle.net/tKMgd/5/
If the problem is with header/footer, rather than using data-position="fixed" in your html just set position:fixed in your css and give the element a high z-index - viola, no more "blinking"
Someone discussed this problem and had a temporary solution, maybe it might work for you as well?
https://github.com/jquery/jquery-mobile/issues/2226
Excerpt of answer
When you fast switch between pages using a persistent footer (with the same data-id) the source code doesn't identify the previous page's footer. The problem happens because of the setTimeout (line 5812 - jquery.mobile-1.0b2). If you fast switch between the pages the footer won't be there because of the 500ms delay. If you take out this setTimeout or set it to zero, this problem doesn't happen again, but I'm not sure the consequences of this.
I was able to reproduce this problem on Safari and iOS (I haven't tried other devices/browsers)
I did not do anything specific to solve this problem.But over the course of the time the issue is not happening.In between I had updated the JQM versions i have been using and now using JQM 1.1
加载中,请稍侯......
精彩评论