我想在jqm网站中使用Panel作为我的选择语言组件。因此，每个页面都需要存在该组件。以下是单页面板的设置。
来自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上的状态发生变化，那么这将是一个问题，那么所有其他的都需要同步化
B - 创建一个在页面更改时以编程方式移动的面板 ----这看起来像是一个黑客
C - 发现jqm是否已经解决了这个问题 ----因此我问的问题是：）
jqm是否有办法将Panel从一个页面移动到另一个页面？
答案 0 :(得分：23)
您最好的做法是为每个页面动态创建一个面板。
我为你做了一个工作的例子：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");
});
});
几个描述：
jQuery Mobile开发人员已经声明，在下一个主要版本面板小部件中将不再需要成为页面的一部分，而是将其放置在与页面div相同的级别中。因此需要一个小组。不幸的是，您需要动态创建它。
答案 1 :(得分：3)
这是我提出的解决方案。我将面板内容存储在隐藏的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();
});
答案 2 :(得分：2)
我自己一直在努力解决这个问题，这就是我正在使用的解决方案：
$( ".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操作带来的巨大开销。它并不理想，但确实有效。
编辑：请注意，它设置为适用于每个页面，并在加载第一页时触发，您可能会在其中开始菜单以及没有上一页对象的位置。但你可能会把菜单放在别处，并在那里寻找它作为后备。
答案 3 :(得分：2)
从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 -->
答案 4 :(得分：0)
Panel是1.3中引入的新概念。所以希望很快就会出现更多的教程。至于你的问题，我想你在每个页面中编写一个面板的效果会更好。您可以实时更改页面，但请务必按照文档中的说明调用以下方法。
$( "#mypanel" ).trigger( "updatelayout" );
我不确定其他方法是否可行。
答案 5 :(得分：0)
我遇到了同样的问题，最后使用 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>
...
sform.html就会向主页发送消息：
window.parent.postMessage({action:"search",params:criteria},'*');
，主页抓住它：
window.onmessage = function (e) {
if (e.data.action == "search") {
var criteria = e.data.params;
loadHotelListPage(criteria);
}
};
我知道这很奇怪，但它有效
答案 6 :(得分：0)
“面板不能放在页面外，但在将来的版本中将删除此约束。” （来自http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/）
这种能力似乎是使面板作为整个应用导航设备最有用和方便的关键。
答案 7 :(得分：0)
对于面板，页眉和页脚，我为每个元素创建了一个模板（我使用dustjs）。在pagebeforecreate事件中，我将html附加到当前页面。如果您希望JQM“增强”html，则必须使用pagebeforecreate事件。如果您不关心这一点，可以使用`pagecreate'事件。
答案 8 :(得分：0)
我在使用单页模板时遇到了这个问题。 我只想要一个带有id菜单的div，并将其附加到单页模板的所有页面中。
我的菜单面板代码如下：
<div id="menu">
<h1>Menu</h1>
... some content ---
</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");
});
}）;
这段代码非常完美，我很高兴能够正确回答我一直在寻找两个小时或更长时间的问题。
评论是否奏效。 来自西班牙的问候
答案 9 :(得分：0)
我的方法与此处的其他答案类似，但足以保证发布。
在我的多页项目中，我在第一页中构建导航面板，如下所示：
<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);
});
答案 10 :(得分：0)
在 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>
这适用于我的移动网络课程和我的移动网络应用程序教师今天刚刚向我们展示。
在 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 -->