Jquery Mobile Panel Swipe Event and Tabs Swipe Event Inside a page? -
i have multiple pages inside single html. , i've external panel can swipe in , out (panel can open , close ) in pages. in 1 page have swipe tabs feature. both panel , swipe tabs functionality fine now.. problem when come swipe tabs page,swiping tabs pull panel too, how adjust these swipe events?, how detect swipe tabs , panel swipe events correctly.
here demo created, need panel can can open , close swipe events. user can swipe between swipes , swipe open , close left panel, panel must external can available in whole pages. unfortunately panel not working in demo don't know whats happening, working in project.
to add external panel, can use regular jquery document ready:
var panel = '<div data-theme="a" data-role="panel" data-display="overlay" id="leftpanel"><ul data-role="listview"><li data-icon="false"><a data-ajax="false" href="index.html">home</a></li><li data-icon="false"><a data-ajax="false" href="html/examples.html">examples</a></li><li data-icon="false"><a data-ajax="false" href="html/custom/version.html">version 1.0.1</a></li></ul></div>'; $(function () { $("body").prepend(panel); $("[data-role=panel]").panel().enhancewithin(); }); then listen swipes on content div change tabs , on header div open/close panel:
$("div[data-role=content]").on("swipeleft", function (event) { changenavtab(true); }); $("div[data-role=content]").on("swiperight", function (event) { changenavtab(false); }); // navigation drawer swipe listener $("div[data-role=header]").on("swipeleft swiperight", function (e) { // save swipe direction right/left var dir = 'prev'; if (e.type == 'swiperight') { dir = 'next'; } if (dir == 'prev') { $('#leftpanel').panel('close'); } else { $('#leftpanel').panel('open'); } }); updated fiddle
Comments
Post a Comment