我是否必須爲每個頁面創建一個新面板？

Question

我想在我的Choose Language組件中使用jqm站點中的面板。所以這個組件將需要出現在每個頁面上。這是一個單頁面板的設置。

從jquerymobile.com（...我加了一個標題按鈕）

<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 --> 

我的身影，我有3個解決方案：

• A - 每創建面板的副本頁 ----這將是一個問題，如果page_N狀態改變，那麼所有其他的將需要synshronized

• 乙 - 創建一個單一的面板是親語法移動在頁面改變 ----這似乎是一個黑客

• Ç - 發現如果JQM已經有一個解決這個問題 ----所以我我問這個問題:)

請問jqm是否有辦法將頁面移動到頁面？

Answer 1

面板是1.3中引入的新概念。所以讓我們希望更多的教程將很快出現。至於你的問題，我想你最好在每個頁面上編寫一個面板。您可以實時更改頁面，但請確保按照文檔中記錄的方法調用以下方法。

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

我不確定其他方法是否可行。

Answer 2

您的最佳行動方案是爲每個頁面動態創建一個面板。

我給你做一個工作示例：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");  
    });  
}); 

很少有描述：

需要
• $ .mobile.activePage，因爲我們將有相同的面板在每一個頁面，所有的人都會有相同的ID。如果我們在沒有活動頁面的情況下打開它，我們將在DOM中打開它的第一個事件

jQuery Mobile開發人員表示，在下一個主要版本中，面板小部件將不再需要成爲頁面的一部分，而是將其放置在與頁面div相同的級別。所以需要一個小組。不幸的是，你需要動態創建它。

Answer 3

我有同樣的問題，並使用IFRAME從文件加載持續contenent（在我的情況下，先進的搜索形式）結束：

<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。

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

和主網頁捕捉它這樣：當用戶提交了搜索條件爲HTML發送消息到主頁

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

我知道這是不可思議的，但它的工作原理

Answer 4

「一個面板不能放在頁面外，但這個約束將在未來的版本中被刪除。」 （來自http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/）

這種能力似乎是使面板作爲整體應用導航設備最有用和方便的關鍵。

Answer 5

對於面板和頁眉和頁腳，我爲每個元素創建一個模板（我使用dustjs）。在pagebeforecreate事件中，我將html附加到當前頁面。如果您希望JQM'增強'html，則必須使用pagebeforecreate事件。如果你不關心這個，你可以使用`pagecreate'事件。

Answer 6

我在使用單個頁面模板時遇到了這個問題。 我只想要一個帶有id菜單的div，並將它添加到單個頁面模板的所有頁面中。

我的菜單面板的代碼如下所示：

而我的JS代碼：

$(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");  
});  

}）;

此代碼工作完美，我很高興得到正確的答案我的問題，我一直在尋找兩個小時以上。

評論是否有效。從西班牙

Answer 7

我已經與這個自己一直在努力，並在這裏 映入眼簾是我使用的解決方案：

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

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

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

訣竅似乎是使用一個.remove（）代替.detach（）拿起你想移動的面板 - 沒有任何存儲的jQuery對象 - 這樣jQuery Mobile不會對標記進行假設。另外，這個解決方案增加了DOM操作的相當大的開銷，這讓我感到震驚。這並不理想，但確實奏效。

編輯：請注意，它設置爲每個頁面都工作，並在加載第一頁時啓動，其中大概有菜單開始和沒有以前的頁面對象。但是，您可能會將菜單保留在其他地方，並將其作爲後備進行查找。

Answer 8

這是我想出的解決方案。我將面板內容存儲在一個隱藏的div中，並延遲jquery移動初始化。當文檔加載時，我將面板內容附加到每個（jqm）頁面元素，然後初始化jqm。首次加載頁面時會發生唯一的性能衝擊。

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> 

腳本：

$.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(); 
}); 

Answer 9

我的做法是在這裏類似於其他的答案，但足夠不同，值得一交。

在我的多頁的項目中，我建立的第一頁我的導航面板像這樣：

<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.... --> 

然後在後續頁面我添加一個div用合適的類名來識別它：

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

然後在app的第一頁的pagebeforecreate事件中，我克隆導航面板並用它替換所有的子容器：

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

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

      }); 

Answer 10

靈感來自Gajotres以及AppFramework處理面板的方式。它通過定義面板複製到活動頁面，該面板在右面板ID定義爲頁面的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"); 
}); 

做一個網頁是這樣的：

<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> 

某處放置面板的網頁外，並隱藏他們是這樣的：

<!-- 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 --> 

Answer 11

在jQuery的1.4.4，你可以簡單地使用：

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

這個工作對我的移動網絡項目類和我移動Web應用程序教師今天剛剛向我們展示。

看到它Jquery Mobile Web Application

的頁面代碼的其餘部分是：

<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 -->