I would like to use a Panel in a jqm site for my Choose Language component. So that component will need to be present on every page. Here is the setup for a single-page panel.
from jquerymobile.com ( ... I added a header button)
<div id="mypanel" data-role="panel" >
<!-- panel content goes here -->
</div><!-- /panel -->
<div id="myheader" data-role="header" >
<a id='panel_toggle' data-role='button'>choose language</a>
</div><!-- /header -->
<!-- content -->
<!-- footer -->
</div><!-- page -->
I figure that I have 3 solutions:
A - create a duplicate copy of the panel on every page ---- this will be a problem if the state on page_N changes, then all others will need to be synshronized
B - create a single panel that is pro-grammatically moved on page changes ---- this seems like a hack
C - discover if jqm already has a solution to this problem ---- hence I am asking the question :)
Does jqm have a way to move a Panel from page to page?
Your best course of action is to dynamically create a panel for every page.
I made you a working example: http://jsfiddle.net/Gajotres/pZzrk/
$(document).on('pagebeforeshow', '[data-role="page"]', function(){
$('<div>').attr({'id':'mypanel','data-role':'panel'}).appendTo($(this));
$('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('mypanel');
$.mobile.activePage.find('#mypanel').panel();
$(document).on('click', '#open-panel', function(){
$.mobile.activePage.find('#mypanel').panel("open");
});
});
Few descriptions:
jQuery Mobile developers have stated that in next major version panel widget will no longer need to be part of a page, instead it will be placed in a same level as a page div. So one panel will ne needed. Unfortunately you will need to dynamically create it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With