8

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?

11 Answers 11

23

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.

9
  • 1
    +1 for it. Good one, but it would be a performance hit. But I love the innovative solution.
    – Jaya Mayu
    Mar 5, 2013 at 12:36
  • 1
    Unfortunately currently it is either this solution or other one (Mayus solution). Also this is not going to be that much big performance hit. Full page refresh take around 50ms.
    – Gajotres
    Mar 5, 2013 at 12:40
  • 1
    Would just like to thank Gajotres (as well as Jasper), you have been terrific help with tackling these jQuery Mobile issues! Apr 17, 2013 at 8:49
  • 1
    +1, that's a nice solution. One comment though: if you want to add widgets to the side panel, you should use the 'pagebeforecreate' event to add the panel and content, because otherwise they will not be displayed correctly. Jun 19, 2013 at 14:19
  • 2
    Hi, panels outside pages is already supported in jqm version 1.4: "If you want to use the same panel on multiple pages you can place the markup outside the page.", please see demos.jquerymobile.com/1.4.0/panel-external
    – aqingsao
    Aug 13, 2014 at 14:02
3

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:

<div data-role='page' class='page'>
  <div data-role='content'>
    <h1>One</h1>
    <a href='#nav' data-role='button'>show nav</a>
  </div>
</div>

<div data-role='page' class='page'>
  <div data-role='content'>
    <h1>Two</h1>
    <a href='#nav' data-role='button'>show nav</a>
  </div>
</div>

<div id='panel-content' style='display:none'>
   <div data-role='panel' class='panel-holder' data-position="right" data-display="reveal" id='nav'>
   <div data-role="content">
     <ul>
       <li><a href="#first" data-link="first">first</a></li>
       <li><a href="#second" data-link="first">second</a></li>
     </ul>
   </div>
</div>
</div>

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();
});
1
  • This was easy to implement and worked nice for me. Thank you.
    – ScottN
    Nov 15, 2013 at 19:55
2

I've been wrestling with this myself, and here's the solution I'm using:

$( ".page" ).on(
    "pageshow",
    function ( event, prevPage ) {
        var $page = $( this ),
            $prevPage = $( prevPage.prevPage ),
            $menuPanel = $( "#panel-menu", $prevPage );

        $menuPanel
            .remove()
            .prependTo( $page );

        $page.trigger( "create" );
    }
);

The trick seems to be to use .remove() instead of .detach() to pick up the panel you want to move - without any stored jQuery objects - so that jQuery Mobile doesn't make assumptions about the markup. Also, it strikes me that this solution adds considerable overhead from DOM manipulation. It's not ideal, but it does work.

EDIT: Note that it's set up to work for every page, and is fired on loading the first page, where you presumably have the menu to start with and where there is no previous page object. But you probably could keep the menu elsewhere and look for it there too as a fallback.

2

with inspiration from Gajotres and the way AppFramework handles panels I've made this. It works by copying defined panels to the active page, the panels are defined by id in right-panel and left-panel attributes for the page div:

$(document).on('pagebeforeshow', '[data-role="page"]', function(){
    // remove unused tmp panels from DOM
    $("#tmpRightPanel").remove();
    $("#tmpLeftPanel").remove();

    // Hide buttons by default (I'm using a static header and footer on every page too)
    $("#openRightPanel").css("display", "none");
    $("#openLeftPanel").css("display", "none");

    // check if right-panel attribute is set on the page
    if ($(this).attr("right-panel")) {
        // if it is, it should append the defined right-panel to the page
        $("#"+$(this).attr("right-panel")).clone().appendTo($(this));

        // rename it to tmpRightPanel
        $.mobile.activePage.find('#'+$(this).attr("right-panel")).attr("id", "tmpRightPanel");

        // make it a panel
        $.mobile.activePage.find('#tmpRightPanel').panel();

        // make it visible (the original right panel is set to display: none)
        $.mobile.activePage.find('#tmpRightPanel').css("display", "block");

        // make the button to open the panel visible
        $("#openRightPanel").css("display", "block");
    }

    // same as right-panel above
    if ($(this).attr("left-panel")) {
        $("#"+$(this).attr("left-panel")).clone().appendTo($(this));
        $.mobile.activePage.find('#'+$(this).attr("left-panel")).attr("id", "tmpLeftPanel");
        $.mobile.activePage.find('#tmpLeftPanel').panel();
        $.mobile.activePage.find('#tmpLeftPanel').css("display","block");
        $("#openLeftPanel").css("display", "block");
    }
});

// make the open panel buttons clickable
$(document).on('click', '#openRightPanel', function(){   
    $.mobile.activePage.find('#tmpRightPanel').panel("open");
});

$(document).on('click', '#openLeftPanel', function(){
    $.mobile.activePage.find('#tmpLeftPanel').panel("open");
});

Make a page like this:

    <div id="main" data-role="page" data-title="Main" right-panel="right-panel" left-panel="left-panel">
         <div class="ui-content">
              some page
         </div>
    </div>

and place the panels somewhere outside a page, and hide them like this:

    <!-- leftpanel -->
    <div data-role="panel" id="left-panel" data-display="push" data-position="left" data-theme="a" style="display:none;">
         something something something
    </div>
    <!-- /leftpanel -->

    <!-- rightpanel -->
    <div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="a" style="display:none;">
         something something something
    </div>
    <!-- /rightpanel -->
0

Panel is a new concept introduced in 1.3. So lets hope more tutorials will show up soon. As of your problem, I guess its better you code a panel in each of your pages. You can make changes to your page real time but make sure to call following method as documented in the documentation.

$( "#mypanel" ).trigger( "updatelayout" );

I'm not sure other ways would be feasible.

4
  • I'm really disliking the idea of multiple 'pages' on one index.html ... it's a cute trick, but just too many problems
    – dsdsdsdsd
    Mar 5, 2013 at 12:15
  • as you can see panels are wrapped inside pages. so I think that would be the good idea though u need to write panel div multiple times. Take buttons on the header for an example. You hard code html back button everytime in the header. Simply just like that
    – Jaya Mayu
    Mar 5, 2013 at 12:18
  • in my case I am wanting to put a language chooser in the panel, and the problem with a language chooser component is that its state changes ... if language is english, then the English option is highlighted; if language is japanese, then the Japanese option is highlighted, etc. ... ... So if I have a duplicate panel on every page, I will have to update every one of them whenever a language is changed.
    – dsdsdsdsd
    Mar 5, 2013 at 12:21
  • 2
    why can't you keep the language in sessionStorage or localStorage and during pageshow event check the storage and highlight or do whatever in the panel??
    – Jaya Mayu
    Mar 5, 2013 at 12:31
0

I had the same problem and ended using iframe to load the persistent contenent (in my case a sophisticated search form) from a file:

<div data-role="panel" ...>
    <div data-role="collapsible" ...>
        <h4>Search for Hotel</h4>
        <div class="tmbe-sformcontainer">
            <iframe class="tmbe-sform" src="sform.html" frameborder="0"></iframe>
...

sform.html sends a message to the main page whenever the user has submitted a search criteria as:

window.parent.postMessage({action:"search",params:criteria},'*');

and the main page captures it like that:

window.onmessage = function (e) {
if (e.data.action == "search") {
    var criteria = e.data.params;
    loadHotelListPage(criteria);
}
};

I know it is weird, but it works

0

"A panel cannot be placed outside a page, but this constraint will be removed in a future version." (From http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/ )

This ability would seem to be the key to make panel most useful and convenient as a whole-app navigation device.

0

For panel, and header and footer, I create a template (I use dustjs) for each element. In the pagebeforecreate event, I append the html into the current page. You have to use pagebeforecreate event if you want JQM to 'enhance' the html. If you don't care about this, you can use the `pagecreate' event.

0

I was with this problem while been using a single page template. I want only to have a div with id menu and have it to append in all pages of the single page template.

My menu panel code looks like:

<div id="menu">
    <h1>Menu</h1>
    ... some content ---
</div>

And my JS code is:

$(document).on('pagebeforeshow', '[data-role="page"]', function(){          

// if the page hasn't got yet a menu panel, append a new menu
if ($.mobile.activePage.find(".menu").length===0) {        
    $('<div>').attr({'data-role':'panel',"class":"menu"}).appendTo($(this));

    // copy the contents of the panel defined before    
    $.mobile.activePage.find('.menu').html($("#menu").html()).panel();    
}

// if click the .showMenu button, open the menu
$(document).on('click', '.showMenu', function(){         
    $.mobile.activePage.find('.menu').panel("open");       
});    

});

This code works perfect and I'm happy to got the right answer to my problem that I have been looking for two hours or more.

Comment if worked. Greets from Spain

0

My approach is similar to other answers here but sufficiently different to warrant a post.

In my multipage project I build my nav panel in the first page like so:

<div data-role="page" id="index">
<div data-role="panel" data-position-fixed="true" data-theme="a" id="nav-panel">
            <ul data-role="listview" data-theme="a" class="nav-search">
                <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                    <li><a href="#" data-destination="#home">Home</a></li>
                    <li><a href="#" data-destination="#search">Search</a></li>
                    <li><a href="#" data-destination="#about">About</a></li>
            </ul>
</div> 
 <!-- etc.... -->

And then in subsequent pages I add a div with a suitable classname to identify it:

<div data-role="page" id="search">
        <div class="navPanelChild"></div>
<!-- etc.... -->

And then on the pagebeforecreate event of the first page of the app I clone the nav panel and replace all the child containers with it:

$(document).delegate("#index", "pagebeforecreate", function () {

            var navpanelCopy = $( "#nav-panel" ).clone();
            $( ".navPanelChild" ).replaceWith(navpanelCopy);

            }); 
0

In Jquery 1.4.4 you can simply use:

<script>
    $(function(){
        $("[data-role='header'],[data-role='footer']").toolbar();
    });
</script>
<script id="panel-init">
        $(function(){
            $( "[data-role='panel']").panel();
        $( "[data-role='listview']").listview();    
    });
</script>

This works on my mobile web project for class and my Mobile Web Applications Teacher just showed us today.

See it at Jquery Mobile Web Application

the rest of the page code is:

<div data-role="header" style="overflow-x:hidden;" data-position="fixed" data-theme="a">
        <h1>Page One</h1>
        <div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-left ui-icon-notext">
            <a href="#nav-panel" class="ui-btn ui-btn-icon-right ui-icon-bars">Menu</a>
            <a href="//soldierupdesigns.com/web295/jquery-mobile/" data-rel="back" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-back">back</a>
        </div>
        <a href="#add-form" class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-gear">Add Form</a>
        <div data-role="navbar">
            <ul>
                <li><a href="//soldierupdesigns.com/web295/jquery-mobile/" class="ui-btn-active">One</a></li>
                <li><a href="#page2">Page Two</a></li>
                <li><a href="#page3">Page Three</a></li>
                <li><a href="#page4">Page Four</a></li>
                <li><a href="#page5">Page Five</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->
    <div data-role="panel" data-display="overlay" data-theme="b" id="nav-panel" data-inset="false" data-position-fixed="true">
        <ul data-role="listview" data-theme="b">
            <li class="list-group-item active" data-icon="delete"><a href="#" data-rel="close" style="color:#ffffff;">Close menu</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Accordion</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Ajax Navigation</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Autocomplete</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Buttons</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Checkboxes</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Collapsibles</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Controlgroup</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Dialogs</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Fixed toolbars</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Flip switch toggle</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Footer toolbar</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Form elements</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Grids</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Header toolbar</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Icons</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Links</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Listviews</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Loader overlay</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Navbar</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Navbar, persistent</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Pages</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">New</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Popup</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Radio buttons</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Select</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Slider, single</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">New</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">New</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">New</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Text inputs & textarea</a></li>
            <li class="list-group-item"><a href="#panel-responsive-page2">Transitions</a></li>
        </ul>
    </div><!-- /panel -->

    <div data-role="panel" data-position="right" data-display="reveal" data-theme="a" id="add-form">

        <form class="userform">

            <h2>Login</h2>

            <label for="name">Username:</label>
            <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">

            <label for="password">Password:</label>
            <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">

            <div class="ui-grid-a">
                <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div>
                <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
            </div>
        </form>

    </div><!-- /panel -->
    <div data-role="page" class="ui-responsive-panel" id="panel-responsive-page1" data-title="Panel responsive page">
        <div class="ui-content"></div>
        <div role="main" class="ui-content jqm-content jqm-fullwidth">
            <h1>Panel responsive</h1>
            <p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode, the right panel reveal. To make this responsive, you can make the page re-flow at wider widths. This allows both the panel menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the <code>class="ui-responsive-panel"</code> to the page container. We have added this class on this demo page. Note that when using the preset class, we also hide the dismiss layer on wider screens if the panel has the push display mode.</p>
            <div data-demo-html="#panel-responsive-page1" data-ajax="true" >View Source</div><!--/demo-html -->
            <br>
            <br>
            <br>
            <br>
            <br>
            <a href="#panel-responsive-page1" data-rel="back" data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-mini ui-btn-inline ui-icon-carat-l ui-btn-icon-left ui-alt-icon ui-nodisc-icon">back</a>
        </div><!-- /content --> 
    </div><!-- /page -->

    <div data-role="footer" style="overflow:hidden;" data-position="fixed" data-tap-toggle="false" class="jqm-footer" data-theme="a">
        <div data-role="navbar">
            <ul>
                <li><a href="//soldierupdesigns.com/web295/jquery-mobile/" class="ui-btn-active">One</a></li>
                <li><a href="#page2">Page Two</a></li>
                <li><a href="#page3">Page Three</a></li>
                <li><a href="#page4">Page Four</a></li>
                <li><a href="#page5">Page Five</a></li>
            </ul>
        </div><!-- /navbar -->
        <p>Copyright 2014 The jQuery Foundation</p>
        <p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
    </div><!-- /footer -->
    <div data-role="page" id="panel-responsive-page2">

        <div data-role="header">
            <h1>Landing page</h1>
        </div><!-- /header -->

        <div role="main" class="ui-content jqm-content">

            <p>This is just a landing page.</p>

            <a href="#panel-responsive-page1" data-rel="back" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-back">back</a>

        </div><!-- /content -->

    </div><!-- /page -->
    <div data-role="page" class="jqm-demos ui-responsive-panel" id="page2" data-title="Panel responsive page">
        <div role="main" class="ui-content jqm-content jqm-fullwidth">
            <h1>Page 2</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium pretium nisi in semper. Integer lectus nibh, fermentum rutrum sagittis vel, sagittis in sem. Praesent condimentum, orci vitae dapibus laoreet, augue odio luctus arcu, eget ultrices lacus ligula non mi. Mauris aliquam et ligula vel mollis. Curabitur pulvinar quis augue id tempus. Phasellus rutrum rhoncus mauris, vel tincidunt sapien porttitor eget. Vivamus sagittis lacus non felis rhoncus, sed feugiat odio ornare. Praesent at sapien vel dolor gravida imperdiet. Nulla mi felis, elementum eget sapien ac, cursus lobortis risus. Aliquam in lacus in arcu placerat laoreet et quis nulla. Morbi et nunc ultricies, molestie augue a, tempor ipsum. Vestibulum non mi mattis, dapibus magna non, condimentum risus. Nam fermentum, ligula ultrices rhoncus vestibulum, augue diam feugiat elit, vitae tincidunt urna odio at erat. Maecenas in mattis libero.</p>
            <p>Sed pulvinar nibh nulla, vitae dapibus odio faucibus id. Curabitur rutrum sodales dolor. Suspendisse mattis semper dapibus. Nullam iaculis tristique orci, ut consectetur augue accumsan eget. Duis turpis massa, egestas at lobortis nec, mollis eget sapien. Aliquam sed blandit lacus, ac fringilla nunc. Praesent quis faucibus magna, a imperdiet nulla. Pellentesque tristique, elit ut cursus tristique, ex turpis placerat dolor, non vehicula sem urna a nibh. In tristique hendrerit ex nec rutrum. Aenean sodales erat nisl, sed consequat enim consectetur id. Vivamus sit amet suscipit quam, a efficitur ante. Integer in luctus diam. Integer fringilla felis risus, vitae vehicula quam pharetra vel. Maecenas ligula lacus, lobortis a condimentum sit amet, faucibus sit amet nisi. Donec mattis scelerisque fringilla.</p>
        </div>
    </div><!-- /page2 -->
    <div data-role="page" class="jqm-demos ui-responsive-panel" id="page3" data-title="Panel responsive page">
        <div role="main" class="ui-content jqm-content jqm-fullwidth">
            <h1>Page 3</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium pretium nisi in semper. Integer lectus nibh, fermentum rutrum sagittis vel, sagittis in sem. Praesent condimentum, orci vitae dapibus laoreet, augue odio luctus arcu, eget ultrices lacus ligula non mi. Mauris aliquam et ligula vel mollis. Curabitur pulvinar quis augue id tempus. Phasellus rutrum rhoncus mauris, vel tincidunt sapien porttitor eget. Vivamus sagittis lacus non felis rhoncus, sed feugiat odio ornare. Praesent at sapien vel dolor gravida imperdiet. Nulla mi felis, elementum eget sapien ac, cursus lobortis risus. Aliquam in lacus in arcu placerat laoreet et quis nulla. Morbi et nunc ultricies, molestie augue a, tempor ipsum. Vestibulum non mi mattis, dapibus magna non, condimentum risus. Nam fermentum, ligula ultrices rhoncus vestibulum, augue diam feugiat elit, vitae tincidunt urna odio at erat. Maecenas in mattis libero.</p>
            <p>Sed pulvinar nibh nulla, vitae dapibus odio faucibus id. Curabitur rutrum sodales dolor. Suspendisse mattis semper dapibus. Nullam iaculis tristique orci, ut consectetur augue accumsan eget. Duis turpis massa, egestas at lobortis nec, mollis eget sapien. Aliquam sed blandit lacus, ac fringilla nunc. Praesent quis faucibus magna, a imperdiet nulla. Pellentesque tristique, elit ut cursus tristique, ex turpis placerat dolor, non vehicula sem urna a nibh. In tristique hendrerit ex nec rutrum. Aenean sodales erat nisl, sed consequat enim consectetur id. Vivamus sit amet suscipit quam, a efficitur ante. Integer in luctus diam. Integer fringilla felis risus, vitae vehicula quam pharetra vel. Maecenas ligula lacus, lobortis a condimentum sit amet, faucibus sit amet nisi. Donec mattis scelerisque fringilla.</p>
        </div>
    </div><!-- /page3 -->
    <div data-role="page" class="jqm-demos ui-responsive-panel" id="page4" data-title="Panel responsive page">
        <div role="main" class="ui-content jqm-content jqm-fullwidth">
            <h1>Page 4</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium pretium nisi in semper. Integer lectus nibh, fermentum rutrum sagittis vel, sagittis in sem. Praesent condimentum, orci vitae dapibus laoreet, augue odio luctus arcu, eget ultrices lacus ligula non mi. Mauris aliquam et ligula vel mollis. Curabitur pulvinar quis augue id tempus. Phasellus rutrum rhoncus mauris, vel tincidunt sapien porttitor eget. Vivamus sagittis lacus non felis rhoncus, sed feugiat odio ornare. Praesent at sapien vel dolor gravida imperdiet. Nulla mi felis, elementum eget sapien ac, cursus lobortis risus. Aliquam in lacus in arcu placerat laoreet et quis nulla. Morbi et nunc ultricies, molestie augue a, tempor ipsum. Vestibulum non mi mattis, dapibus magna non, condimentum risus. Nam fermentum, ligula ultrices rhoncus vestibulum, augue diam feugiat elit, vitae tincidunt urna odio at erat. Maecenas in mattis libero.</p>
            <p>Sed pulvinar nibh nulla, vitae dapibus odio faucibus id. Curabitur rutrum sodales dolor. Suspendisse mattis semper dapibus. Nullam iaculis tristique orci, ut consectetur augue accumsan eget. Duis turpis massa, egestas at lobortis nec, mollis eget sapien. Aliquam sed blandit lacus, ac fringilla nunc. Praesent quis faucibus magna, a imperdiet nulla. Pellentesque tristique, elit ut cursus tristique, ex turpis placerat dolor, non vehicula sem urna a nibh. In tristique hendrerit ex nec rutrum. Aenean sodales erat nisl, sed consequat enim consectetur id. Vivamus sit amet suscipit quam, a efficitur ante. Integer in luctus diam. Integer fringilla felis risus, vitae vehicula quam pharetra vel. Maecenas ligula lacus, lobortis a condimentum sit amet, faucibus sit amet nisi. Donec mattis scelerisque fringilla.</p>
        </div>
    </div><!-- /page4 -->
    <div data-role="page" class="jqm-demos ui-responsive-panel" id="page5" data-title="Panel responsive page">
        <div role="main" class="ui-content jqm-content jqm-fullwidth">
            <h1>Page 5</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium pretium nisi in semper. Integer lectus nibh, fermentum rutrum sagittis vel, sagittis in sem. Praesent condimentum, orci vitae dapibus laoreet, augue odio luctus arcu, eget ultrices lacus ligula non mi. Mauris aliquam et ligula vel mollis. Curabitur pulvinar quis augue id tempus. Phasellus rutrum rhoncus mauris, vel tincidunt sapien porttitor eget. Vivamus sagittis lacus non felis rhoncus, sed feugiat odio ornare. Praesent at sapien vel dolor gravida imperdiet. Nulla mi felis, elementum eget sapien ac, cursus lobortis risus. Aliquam in lacus in arcu placerat laoreet et quis nulla. Morbi et nunc ultricies, molestie augue a, tempor ipsum. Vestibulum non mi mattis, dapibus magna non, condimentum risus. Nam fermentum, ligula ultrices rhoncus vestibulum, augue diam feugiat elit, vitae tincidunt urna odio at erat. Maecenas in mattis libero.</p>
            <p>Sed pulvinar nibh nulla, vitae dapibus odio faucibus id. Curabitur rutrum sodales dolor. Suspendisse mattis semper dapibus. Nullam iaculis tristique orci, ut consectetur augue accumsan eget. Duis turpis massa, egestas at lobortis nec, mollis eget sapien. Aliquam sed blandit lacus, ac fringilla nunc. Praesent quis faucibus magna, a imperdiet nulla. Pellentesque tristique, elit ut cursus tristique, ex turpis placerat dolor, non vehicula sem urna a nibh. In tristique hendrerit ex nec rutrum. Aenean sodales erat nisl, sed consequat enim consectetur id. Vivamus sit amet suscipit quam, a efficitur ante. Integer in luctus diam. Integer fringilla felis risus, vitae vehicula quam pharetra vel. Maecenas ligula lacus, lobortis a condimentum sit amet, faucibus sit amet nisi. Donec mattis scelerisque fringilla.</p>
        </div>
    </div><!-- /page5 -->

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.