javascript - Do I have to create a new panel for every page?

Question

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?

Answer 1

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:

• $.mobile.activePage is needed because we will have same panel in every page, and all of them will have same id. If we open it without active page we will open its first occurrence inside the DOM.

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.