JQuery Mobile Panel not working well
I created some spacing divs on the same page to keep the page the same, but the div changed. Used the jquery mobile page swipe hint and did some tweaks. The div wiring works fine, but I created a panel and whenever I navigate from the first div to the second div and go back to the first div again, the panel does not work. Please help me with the panel. Here is my code: -
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="jquery/jquery.min.js"></script>
<script src="js/swipe-page.js"></script>
<script src="jquery/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="header" data-role="header" data-id="header" data-position="fixed" data-tap-toggle="false">
<h1>Swipe left or right</h1>
<a href="#mypanel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open left panel</a>
<!-- <div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="grid" class="ui-btn-active">News</a></li>
<li><a href="market.html" data-icon="star">Market</a></li>
<li><a href="#" data-icon="gear">Announcement</a></li>
<li><a href="#" data-icon="comment">Portfolio</a></li>
</ul>
</div> --><!-- /navbar -->
</div><!-- /header -->
<div data-role="page" id="index" class="demo-page" data-title="Index" data-dom-cache="true" data-theme="a" data-next="market">
<div role="main" class="ui-content">
<h1>Div 1</h1>
</div><!-- /content -->
<div data-role="panel" id="mypanel" data-theme="a" data-display="overlay" data-position="left" >
<ul data-role="listview">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#panel-fixed-page2">Accordion</a></li>
<li><a href="#panel-fixed-page2">Ajax Navigation</a></li>
<li><a href="#panel-fixed-page2">Autocomplete</a></li>
<li><a href="#panel-fixed-page2">Buttons</a></li>
<li><a href="#panel-fixed-page2">Checkboxes</a></li>
<li><a href="#panel-fixed-page2">Collapsibles</a></li>
<li><a href="#panel-fixed-page2">Controlgroup</a></li>
</ul>
</div><!-- /panel -->
</div><!-- /page -->
<div data-role="page" id="market" class="demo-page" data-title="Market" data-dom-cache="true" data-theme="a" data-prev="index">
<div role="main" class="ui-content">
<h1>Div 2</h1>
</div><!-- /content -->
<div data-role="panel" id="mypanel" data-theme="a" data-display="overlay" data-position="left">
<ul data-role="listview">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#panel-fixed-page2">Accordion</a></li>
<li><a href="#panel-fixed-page2">Ajax Navigation</a></li>
<li><a href="#panel-fixed-page2">Autocomplete</a></li>
<li><a href="#panel-fixed-page2">Buttons</a></li>
<li><a href="#panel-fixed-page2">Checkboxes</a></li>
<li><a href="#panel-fixed-page2">Collapsibles</a></li>
<li><a href="#panel-fixed-page2">Controlgroup</a></li>
</ul>
</div><!-- /panel -->
</div><!-- /page -->
<div id="footer" data-id="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li><a href="#">Latest News</a></li>
<li><a href="#">Featured News</a></li>
<li><a href="#">Most Read</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</body>
</html>
Used javascript to use swipe div: -
$(document).on('pageinit', function(event){
$('div.ui-page').on("swipeleft", function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$('div.ui-page').on("swiperight", function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, { transition: "slide", reverse: true }, true, true);
}
});
});
source to share
You are using the same ID for both panels, which is incorrect. Give each panel a different ID, or use an external panel such as toolbars (header / footer).
Place the div panel outside the page div and then manually initialize it.
<!-- panel -->
<div data-role="panel" id="mypanel" data-theme="a" data-display="overlay" data-position="left">
<ul data-role="listview">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#panel-fixed-page2">Accordion</a></li>
<li><a href="#panel-fixed-page2">Ajax Navigation</a></li>
<li><a href="#panel-fixed-page2">Autocomplete</a></li>
<li><a href="#panel-fixed-page2">Buttons</a></li>
<li><a href="#panel-fixed-page2">Checkboxes</a></li>
<li><a href="#panel-fixed-page2">Collapsibles</a></li>
<li><a href="#panel-fixed-page2">Controlgroup</a></li>
</ul>
</div><!-- /panel -->
<!-- pages -->
<div data-role="page" id="page1">
</div>
<div data-role="page" id="page1">
</div>
Initialize external panel
$(function () {
$("#mypanel").panel().enhanceWithin();
});
.enhanceWithin()
used to initialize the widget inside the panel.
As far as your swipe code is concerned, it needs to be adjusted. You are multiplying the subwoofers on each pageinit
. those. if you have five pages, on the fifth page, the napkins will shoot five times.
Please note that both pageinit
and $.mobile.changePage
are deprecated from jQM 1.4, their replacements pagecreate
and $.mobile.pageContainer.pagecontainer("change", target)
accordingly.
$(document).on('pagecreate', function (event) {
var currentPage = $(event.target);
currentPage.on("swipeleft", function () {
var nextpage = currentPage.next('[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.pageContainer.pagecontainer("change", nextpage, { /* options */ });
}
});
currentPage.on("swiperight", function () {
var prevpage = currentPage.prev('[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.pageContainer.pagecontainer("change", prevpage, { /* options */ });
}
});
});
source to share