我是否必须为每个页面创建一个新面板？

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