How to create External Panels in jQuery mobile? -
i trying create multi page application , using jquery mobile, have couple of panels using jquery mobile:
<div data-role="panel" id="left-panel" data-theme="b" data-display="overlay"></div> <div data-role="panel" id="right-panel" data-display="overlay" data-position="right" data-theme="b"></div>
however, cumbersome add these panels every page create. need in using these panels in pages i'm create. in advance!
this script worked me
$(document).on("pagecreate", ".demo-page", function() { var panell = '<div data-role="panel" id="left-panel" data-position="left" data-display="reveal" data-theme="a"><ul data-role="listview" data-inset="true"><li><a href="index.html" data-transition="slide">home</a></li><li><a href="bio.html" data-transition="slide">about</a></li><li><a href="news.html" data-transition="slide">news</a></li></ul></div>'; $.mobile.pagecontainer.prepend(panell); $("#left-panel").panel().enhancewithin(); var panelr = '<div data-role="panel" id="right-panel" data-position="right" data-display="reveal" data-theme="a"><ul data-role="listview" data-inset="true"><li><a href="index.html" data-transition="slide">home</a></li><li><a href="bio.html" data-transition="slide">about</a></li><li><a href="news.html" data-transition="slide">news</a></li></ul></div>'; $.mobile.pagecontainer.prepend(panelr); $("#right-panel").panel().enhancewithin(); });
Comments
Post a Comment