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 pane

Answer 1

Here's the solution I came up with. I store the panel contents in a hidden div, and defer the jquery mobile initialization. When the document loads, I append the panel contents to each of the (jqm) page elements and then initialize jqm. The only performance hit occurs when the page first loads.

HTML:

  

    
One
    show nav
  



  

    
Two
    show nav
  



   

   

     

       
first
       
second
     
   

Script:

$.mobile.autoInitializePage = false;
$(document).on("ready" function(evt) {
    var panelHtml = $("#panel-content").html();
    var pages = $(".page");
    for (var i = 0; i < pages.length; i++)
    { //done synchronously so we can initialize jquery mobile after the DOM is all setup
       $(pages[i]).append(panelHtml);
    }

    $("#panel-content").remove(); // this doesn't need to be in the DOM anymore
    $.mobile.initializePage();
});