Javascript 我是否必须为每个页面创建一个新面板？
我想在jqm站点中为我的Choose语言组件使用一个面板。因此，该组件将需要出现在每个页面上。以下是单页面板的设置 from（…我添加了一个标题按钮）Javascript 我是否必须为每个页面创建一个新面板？,javascript,jquery,html,css,jquery-mobile,Javascript,Jquery,Html,Css,Jquery Mobile,我想在jqm站点中为我的Choose语言组件使用一个面板。因此，该组件将需要出现在每个页面上。以下是单页面板的设置 from（…我添加了一个标题按钮） 选择语言 我想我有3种解决方案： A-在每页上创建面板的副本 ----这将是一个问题，如果页面上的状态发生变化，则需要对所有其他页面进行同步 B-创建一个面板，在页面更改时按语法移动 ----这看起来像是一个黑客 C-发现jqm是否已经有了此问题的解决方案 ----因此，我要问一个问题：） jqm有办法将面板从一页移到另一页吗？面板是1
选择语言
- A-在每页上创建面板的副本 ----这将是一个问题，如果页面上的状态发生变化，则需要对所有其他页面进行同步
- B-创建一个面板，在页面更改时按语法移动 ----这看起来像是一个黑客
- C-发现jqm是否已经有了此问题的解决方案 ----因此，我要问一个问题：）
jqm有办法将面板从一页移到另一页吗？面板是1.3中引入的一个新概念。所以，让我们期待更多的教程将很快出现。至于你的问题，我想你最好在你的每一页编写一个面板。您可以实时更改页面，但请确保调用文档中记录的以下方法
$( "#mypanel" ).trigger( "updatelayout" );
我不确定其他方法是否可行。您最好的做法是为每个页面动态创建一个面板 我给你举了一个有效的例子：
$（document）.on（'pagebeforeshow'，'[data role=“page”]'，function（）{
$（''）.attr（{'id'：'mypanel'，'data-role'：'panel'}）.appendTo（$（this））；
$（''）.attr（{'id'：'test-btn'，'data-role'：'button'}）.html（'Click me'）.appendTo（'mypanel'）；
$.mobile.activePage.find（'#mypanel'）.panel（）；
$（文档）.on（'单击'，'打开面板'，函数（）{
$.mobile.activePage.find（'#mypanel'）.panel（“打开”）；
});
});
- $.mobile.activePage是必需的，因为我们在每个页面中都有相同的面板，并且所有的面板都有相同的id。如果我们在没有活动页面的情况下打开它，我们将在DOM中打开它的第一个匹配项
jQuery移动开发人员表示，在下一个主要版本中，面板小部件将不再需要成为页面的一部分，而是将其放置在与页面div相同的级别上。因此，将需要一个面板。不幸的是，您需要动态创建它。我也遇到了同样的问题，最后使用iframe从文件中加载持久内容（在我的例子中是复杂的搜索表单）：
<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>
...
window.onmessage = function (e) {
if (e.data.action == "search") {
var criteria = e.data.params;
loadHotelListPage(criteria);
}
};
这种能力似乎是使panel作为整个应用程序导航设备最有用、最方便的关键。对于panel、页眉和页脚，我为每个元素创建了一个模板（我使用）。在
pagebeforecreatepagebeforecreate<div id="menu">
<h1>Menu</h1>
... some content ---
</div>
菜单
... 一些内容---
$(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");
});
$（document）.on（'pagebeforeshow'，'[data role=“page”]'，function（）{
//如果页面还没有菜单面板，请附加一个新菜单
如果（$.mobile.activePage.find（“.menu”）.length==0）{
$（''）.attr（{'data-role'：'panel'，'class:“menu”}）.appendTo（$（this））；
//复制之前定义的面板的内容
$.mobile.activePage.find（'.menu'）.html（$（“#menu”）.html（））.panel（）；
}
//如果单击.showMenu按钮，则打开菜单
$（文档）.on（'单击'，'.showMenu'，函数（）{
$.mobile.activePage.find（'.menu'）.panel（“打开”）；
});
来自西班牙的问候我一直在努力解决这个问题，下面是我正在使用的解决方案：
$（“.page”）。在(
“网页秀”，
函数（事件，前页）{
var$page=$（此），
$prevPage=$（prevPage.prevPage），
$menuPanel=$（“#面板菜单，$prevPage）；
$menuPanel
.删除（）
.prependTo（$page）；
$page.trigger（“创建”）；
}
);
编辑：注意，它被设置为适用于每个页面，并在加载第一个页面时启动，您可能从该页面开始使用菜单，并且没有上一个页面对象。但是你可以把菜单放在别的地方，也可以在那里寻找，作为一种退路。这是我提出的解决方案。我将面板内容存储在一个隐藏的div中，并推迟jquery mobile初始化。加载文档时，我将面板内容附加到每个（jqm）页面元素，然后初始化jqm。只有在页面首次加载时才会出现性能问题 HTML:
一个
两个
$.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();
});
$.mobile.autoInitializePage=false；
$（文档）.on（“就绪”函数（evt）{
var panelHtml=$（“#面板内容”）.html（）；
变量页=$（“.page”）；
对于（变量i=0；i<div id="menu">
<h1>Menu</h1>
... some content ---
</div>
$(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");
});
<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();
});
<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 data-role="page" id="search">
<div class="navPanelChild"></div>
<!-- etc.... -->
$(document).delegate("#index", "pagebeforecreate", function () {
var navpanelCopy = $( "#nav-panel" ).clone();
$( ".navPanelChild" ).replaceWith(navpanelCopy);
});
$(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 -->
<script>
$(function(){
$("[data-role='header'],[data-role='footer']").toolbar();
});
</script>
<script id="panel-init">
$(function(){
$( "[data-role='panel']").panel();
$( "[data-role='listview']").listview();
});
</script>
<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 -->