javascript 我是否必须为每个页面创建一个新面板？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15222589/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Do I have to create a new panel for every page?
提问by dsdsdsdsd
I would like to use a Panel in a jqm site for my Choose Language component. So that component will need to be present on every page. Here is the setup for a single-page panel.
我想在 jqm 站点中为我的选择语言组件使用面板。因此该组件需要出现在每个页面上。这是单页面板的设置。
from jquerymobile.com( ... I added a header button)
来自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 -->
I figure that I have 3 solutions:
我想我有 3 个解决方案：
A - create a duplicate copy of the panel on every page ---- this will be a problem if the state on page_N changes, then all others will need to be synshronized
B - create a single panel that is pro-grammatically moved on page changes ---- this seems like a hack
C - discover if jqm already has a solution to this problem ---- hence I am asking the question :)
A - 在每个页面上创建面板的副本 ---- 如果 page_N 上的状态发生变化，这将是一个问题，然后所有其他页面都需要同步
B - 创建一个在页面更改时以编程方式移动的单个面板 ---- 这似乎是一个黑客
C - 发现 jqm 是否已经解决了这个问题----因此我在问这个问题:)
Does jqm have a way to move a Panel from page to page?
jqm 有没有办法在页面之间移动面板？
回答by Gajotres
Your best course of action is to dynamically create a panel for every page.
最好的做法是为每个页面动态创建一个面板。
I made you a working example: http://jsfiddle.net/Gajotres/pZzrk/
我给你做了一个工作示例：http: //jsfiddle.net/Gajotres/pZzrk/
$(document).on('pagebeforeshow', '[data-role="page"]', function(){
$('<div>').attr({'id':'mypanel','data-role':'panel'}).appendTo($(this));
$('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('mypanel');
$.mobile.activePage.find('#mypanel').panel();
$(document).on('click', '#open-panel', function(){
$.mobile.activePage.find('#mypanel').panel("open");
});
});
Few descriptions:
几个说明：
- $.mobile.activePage is needed because we will have same panel in every page, and all of them will have same id. If we open it without active page we will open its first occurrence inside the DOM.
- $.mobile.activePage 是必需的，因为我们将在每个页面中使用相同的面板，并且它们都具有相同的 id。如果我们在没有活动页面的情况下打开它，我们将在 DOM 中打开它的第一次出现。
jQuery Mobile developers have stated that in next major version panel widget will no longer need to be part of a page, instead it will be placed in a same level as a page div. So one panel will ne needed. Unfortunately you will need to dynamically create it.
jQuery Mobile 开发人员表示，在下一个主要版本中，面板小部件将不再需要成为页面的一部分，而是将其放置在与页面 div 相同的级别。所以需要一个面板。不幸的是，您需要动态创建它。
回答by Jason
Here's the solution I came up with. I store the panel contents in a hidden div, and defer the jquery mobile initialization. When the document loads, I append the panel contents to each of the (jqm) page elements and then initialize jqm. The only performance hit occurs when the page first loads.
这是我想出的解决方案。我将面板内容存储在一个隐藏的 div 中，并推迟 jquery 移动初始化。当文档加载时，我将面板内容附加到每个 (jqm) 页面元素，然后初始化 jqm。唯一的性能损失发生在页面首次加载时。
HTML:
HTML：
<div data-role='page' class='page'>
<div data-role='content'>
<h1>One</h1>
<a href='#nav' data-role='button'>show nav</a>
</div>
</div>
<div data-role='page' class='page'>
<div data-role='content'>
<h1>Two</h1>
<a href='#nav' data-role='button'>show nav</a>
</div>
</div>
<div id='panel-content' style='display:none'>
<div data-role='panel' class='panel-holder' data-position="right" data-display="reveal" id='nav'>
<div data-role="content">
<ul>
<li><a href="#first" data-link="first">first</a></li>
<li><a href="#second" data-link="first">second</a></li>
</ul>
</div>
</div>
</div>
Script:
脚本：
$.mobile.autoInitializePage = false;
$(document).on("ready" function(evt) {
var panelHtml = $("#panel-content").html();
var pages = $(".page");
for (var i = 0; i < pages.length; i++)
{ //done synchronously so we can initialize jquery mobile after the DOM is all setup
$(pages[i]).append(panelHtml);
}
$("#panel-content").remove(); // this doesn't need to be in the DOM anymore
$.mobile.initializePage();
});
回答by abracadaniel
with inspiration from Gajotres and the way AppFramework handles panels I've made this. It works by copying defined panels to the active page, the panels are defined by id in right-panel and left-panel attributes for the page div:
受 Gajotres 的启发和 AppFramework 处理面板的方式，我做了这个。它的工作原理是将定义的面板复制到活动页面，面板由页面 div 的右面板和左面板属性中的 id 定义：
$(document).on('pagebeforeshow', '[data-role="page"]', function(){
// remove unused tmp panels from DOM
$("#tmpRightPanel").remove();
$("#tmpLeftPanel").remove();
// Hide buttons by default (I'm using a static header and footer on every page too)
$("#openRightPanel").css("display", "none");
$("#openLeftPanel").css("display", "none");
// check if right-panel attribute is set on the page
if ($(this).attr("right-panel")) {
// if it is, it should append the defined right-panel to the page
$("#"+$(this).attr("right-panel")).clone().appendTo($(this));
// rename it to tmpRightPanel
$.mobile.activePage.find('#'+$(this).attr("right-panel")).attr("id", "tmpRightPanel");
// make it a panel
$.mobile.activePage.find('#tmpRightPanel').panel();
// make it visible (the original right panel is set to display: none)
$.mobile.activePage.find('#tmpRightPanel').css("display", "block");
// make the button to open the panel visible
$("#openRightPanel").css("display", "block");
}
// same as right-panel above
if ($(this).attr("left-panel")) {
$("#"+$(this).attr("left-panel")).clone().appendTo($(this));
$.mobile.activePage.find('#'+$(this).attr("left-panel")).attr("id", "tmpLeftPanel");
$.mobile.activePage.find('#tmpLeftPanel').panel();
$.mobile.activePage.find('#tmpLeftPanel').css("display","block");
$("#openLeftPanel").css("display", "block");
}
});
// make the open panel buttons clickable
$(document).on('click', '#openRightPanel', function(){
$.mobile.activePage.find('#tmpRightPanel').panel("open");
});
$(document).on('click', '#openLeftPanel', function(){
$.mobile.activePage.find('#tmpLeftPanel').panel("open");
});
Make a page like this:
做一个这样的页面：
<div id="main" data-role="page" data-title="Main" right-panel="right-panel" left-panel="left-panel">
<div class="ui-content">
some page
</div>
</div>
and place the panels somewhere outside a page, and hide them like this:
并将面板放在页面外的某个位置，然后像这样隐藏它们：
<!-- leftpanel -->
<div data-role="panel" id="left-panel" data-display="push" data-position="left" data-theme="a" style="display:none;">
something something something
</div>
<!-- /leftpanel -->
<!-- rightpanel -->
<div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="a" style="display:none;">
something something something
</div>
<!-- /rightpanel -->
回答by Kevin Teljeur
I've been wrestling with this myself, and here's the solution I'm using:
我自己一直在努力解决这个问题，这是我正在使用的解决方案：
$( ".page" ).on(
"pageshow",
function ( event, prevPage ) {
var $page = $( this ),
$prevPage = $( prevPage.prevPage ),
$menuPanel = $( "#panel-menu", $prevPage );
$menuPanel
.remove()
.prependTo( $page );
$page.trigger( "create" );
}
);
The trick seems to be to use .remove() instead of .detach() to pick up the panel you want to move - without any stored jQuery objects - so that jQuery Mobile doesn't make assumptions about the markup. Also, it strikes me that this solution adds considerable overhead from DOM manipulation. It's not ideal, but it does work.
诀窍似乎是使用 .remove() 而不是 .detach() 来选择要移动的面板 - 没有任何存储的 jQuery 对象 - 这样 jQuery Mobile 就不会对标记做出假设。此外，令我震惊的是，此解决方案增加了 DOM 操作的大量开销。这并不理想，但确实有效。
EDIT: Note that it's set up to work for every page, and is fired on loading the first page, where you presumably have the menu to start with and where there is no previous page object. But you probably could keep the menu elsewhere and look for it there too as a fallback.
编辑：请注意，它被设置为适用于每个页面，并在加载第一页时触发，您可能有菜单开始并且没有上一页对象。但是您可能可以将菜单保留在其他地方，并在那里寻找它作为后备。
回答by blayderunner123
In Jquery 1.4.4you can simply use:
在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>
This works on my mobile web project for class and my Mobile Web Applications Teacherjust showed us today.
这适用于我的课堂移动网络项目，我的移动网络应用程序老师今天刚刚向我们展示。
See it at Jquery Mobile Web Application
the rest of the page code is:
其余的页面代码是：
<div data-role="header" style="overflow-x:hidden;" data-position="fixed" data-theme="a">
<h1>Page One</h1>
<div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-left ui-icon-notext">
<a href="#nav-panel" class="ui-btn ui-btn-icon-right ui-icon-bars">Menu</a>
<a href="//soldierupdesigns.com/web295/jquery-mobile/" data-rel="back" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-back">back</a>
</div>
<a href="#add-form" class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-gear">Add Form</a>
<div data-role="navbar">
<ul>
<li><a href="//soldierupdesigns.com/web295/jquery-mobile/" class="ui-btn-active">One</a></li>
<li><a href="#page2">Page Two</a></li>
<li><a href="#page3">Page Three</a></li>
<li><a href="#page4">Page Four</a></li>
<li><a href="#page5">Page Five</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="panel" data-display="overlay" data-theme="b" id="nav-panel" data-inset="false" data-position-fixed="true">
<ul data-role="listview" data-theme="b">
<li class="list-group-item active" data-icon="delete"><a href="#" data-rel="close" style="color:#ffffff;">Close menu</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Accordion</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Ajax Navigation</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Autocomplete</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Buttons</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Checkboxes</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Collapsibles</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Controlgroup</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Dialogs</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Fixed toolbars</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Flip switch toggle</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Footer toolbar</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Form elements</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Grids</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Header toolbar</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Icons</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Links</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Listviews</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Loader overlay</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Navbar</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Navbar, persistent</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Pages</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">New</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Popup</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Radio buttons</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Select</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Slider, single</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">New</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">New</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">New</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Text inputs & textarea</a></li>
<li class="list-group-item"><a href="#panel-responsive-page2">Transitions</a></li>
</ul>
</div><!-- /panel -->
<div data-role="panel" data-position="right" data-display="reveal" data-theme="a" id="add-form">
<form class="userform">
<h2>Login</h2>
<label for="name">Username:</label>
<input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
<div class="ui-grid-a">
<div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div>
<div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
</div>
</form>
</div><!-- /panel -->
<div data-role="page" class="ui-responsive-panel" id="panel-responsive-page1" data-title="Panel responsive page">
<div class="ui-content"></div>
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>Panel responsive</h1>
<p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode, the right panel reveal. To make this responsive, you can make the page re-flow at wider widths. This allows both the panel menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the <code>class="ui-responsive-panel"</code> to the page container. We have added this class on this demo page. Note that when using the preset class, we also hide the dismiss layer on wider screens if the panel has the push display mode.</p>
<div data-demo-html="#panel-responsive-page1" data-ajax="true" >View Source</div><!--/demo-html -->
<br>
<br>
<br>
<br>
<br>
<a href="#panel-responsive-page1" data-rel="back" data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-mini ui-btn-inline ui-icon-carat-l ui-btn-icon-left ui-alt-icon ui-nodisc-icon">back</a>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="footer" style="overflow:hidden;" data-position="fixed" data-tap-toggle="false" class="jqm-footer" data-theme="a">
<div data-role="navbar">
<ul>
<li><a href="//soldierupdesigns.com/web295/jquery-mobile/" class="ui-btn-active">One</a></li>
<li><a href="#page2">Page Two</a></li>
<li><a href="#page3">Page Three</a></li>
<li><a href="#page4">Page Four</a></li>
<li><a href="#page5">Page Five</a></li>
</ul>
</div><!-- /navbar -->
<p>Copyright 2014 The jQuery Foundation</p>
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
</div><!-- /footer -->
<div data-role="page" id="panel-responsive-page2">
<div data-role="header">
<h1>Landing page</h1>
</div><!-- /header -->
<div role="main" class="ui-content jqm-content">
<p>This is just a landing page.</p>
<a href="#panel-responsive-page1" data-rel="back" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-back">back</a>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="jqm-demos ui-responsive-panel" id="page2" data-title="Panel responsive page">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>Page 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium pretium nisi in semper. Integer lectus nibh, fermentum rutrum sagittis vel, sagittis in sem. Praesent condimentum, orci vitae dapibus laoreet, augue odio luctus arcu, eget ultrices lacus ligula non mi. Mauris aliquam et ligula vel mollis. Curabitur pulvinar quis augue id tempus. Phasellus rutrum rhoncus mauris, vel tincidunt sapien porttitor eget. Vivamus sagittis lacus non felis rhoncus, sed feugiat odio ornare. Praesent at sapien vel dolor gravida imperdiet. Nulla mi felis, elementum eget sapien ac, cursus lobortis risus. Aliquam in lacus in arcu placerat laoreet et quis nulla. Morbi et nunc ultricies, molestie augue a, tempor ipsum. Vestibulum non mi mattis, dapibus magna non, condimentum risus. Nam fermentum, ligula ultrices rhoncus vestibulum, augue diam feugiat elit, vitae tincidunt urna odio at erat. Maecenas in mattis libero.</p>
<p>Sed pulvinar nibh nulla, vitae dapibus odio faucibus id. Curabitur rutrum sodales dolor. Suspendisse mattis semper dapibus. Nullam iaculis tristique orci, ut consectetur augue accumsan eget. Duis turpis massa, egestas at lobortis nec, mollis eget sapien. Aliquam sed blandit lacus, ac fringilla nunc. Praesent quis faucibus magna, a imperdiet nulla. Pellentesque tristique, elit ut cursus tristique, ex turpis placerat dolor, non vehicula sem urna a nibh. In tristique hendrerit ex nec rutrum. Aenean sodales erat nisl, sed consequat enim consectetur id. Vivamus sit amet suscipit quam, a efficitur ante. Integer in luctus diam. Integer fringilla felis risus, vitae vehicula quam pharetra vel. Maecenas ligula lacus, lobortis a condimentum sit amet, faucibus sit amet nisi. Donec mattis scelerisque fringilla.</p>
</div>
</div><!-- /page2 -->
<div data-role="page" class="jqm-demos ui-responsive-panel" id="page3" data-title="Panel responsive page">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>Page 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium pretium nisi in semper. Integer lectus nibh, fermentum rutrum sagittis vel, sagittis in sem. Praesent condimentum, orci vitae dapibus laoreet, augue odio luctus arcu, eget ultrices lacus ligula non mi. Mauris aliquam et ligula vel mollis. Curabitur pulvinar quis augue id tempus. Phasellus rutrum rhoncus mauris, vel tincidunt sapien porttitor eget. Vivamus sagittis lacus non felis rhoncus, sed feugiat odio ornare. Praesent at sapien vel dolor gravida imperdiet. Nulla mi felis, elementum eget sapien ac, cursus lobortis risus. Aliquam in lacus in arcu placerat laoreet et quis nulla. Morbi et nunc ultricies, molestie augue a, tempor ipsum. Vestibulum non mi mattis, dapibus magna non, condimentum risus. Nam fermentum, ligula ultrices rhoncus vestibulum, augue diam feugiat elit, vitae tincidunt urna odio at erat. Maecenas in mattis libero.</p>
<p>Sed pulvinar nibh nulla, vitae dapibus odio faucibus id. Curabitur rutrum sodales dolor. Suspendisse mattis semper dapibus. Nullam iaculis tristique orci, ut consectetur augue accumsan eget. Duis turpis massa, egestas at lobortis nec, mollis eget sapien. Aliquam sed blandit lacus, ac fringilla nunc. Praesent quis faucibus magna, a imperdiet nulla. Pellentesque tristique, elit ut cursus tristique, ex turpis placerat dolor, non vehicula sem urna a nibh. In tristique hendrerit ex nec rutrum. Aenean sodales erat nisl, sed consequat enim consectetur id. Vivamus sit amet suscipit quam, a efficitur ante. Integer in luctus diam. Integer fringilla felis risus, vitae vehicula quam pharetra vel. Maecenas ligula lacus, lobortis a condimentum sit amet, faucibus sit amet nisi. Donec mattis scelerisque fringilla.</p>
</div>
</div><!-- /page3 -->
<div data-role="page" class="jqm-demos ui-responsive-panel" id="page4" data-title="Panel responsive page">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>Page 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium pretium nisi in semper. Integer lectus nibh, fermentum rutrum sagittis vel, sagittis in sem. Praesent condimentum, orci vitae dapibus laoreet, augue odio luctus arcu, eget ultrices lacus ligula non mi. Mauris aliquam et ligula vel mollis. Curabitur pulvinar quis augue id tempus. Phasellus rutrum rhoncus mauris, vel tincidunt sapien porttitor eget. Vivamus sagittis lacus non felis rhoncus, sed feugiat odio ornare. Praesent at sapien vel dolor gravida imperdiet. Nulla mi felis, elementum eget sapien ac, cursus lobortis risus. Aliquam in lacus in arcu placerat laoreet et quis nulla. Morbi et nunc ultricies, molestie augue a, tempor ipsum. Vestibulum non mi mattis, dapibus magna non, condimentum risus. Nam fermentum, ligula ultrices rhoncus vestibulum, augue diam feugiat elit, vitae tincidunt urna odio at erat. Maecenas in mattis libero.</p>
<p>Sed pulvinar nibh nulla, vitae dapibus odio faucibus id. Curabitur rutrum sodales dolor. Suspendisse mattis semper dapibus. Nullam iaculis tristique orci, ut consectetur augue accumsan eget. Duis turpis massa, egestas at lobortis nec, mollis eget sapien. Aliquam sed blandit lacus, ac fringilla nunc. Praesent quis faucibus magna, a imperdiet nulla. Pellentesque tristique, elit ut cursus tristique, ex turpis placerat dolor, non vehicula sem urna a nibh. In tristique hendrerit ex nec rutrum. Aenean sodales erat nisl, sed consequat enim consectetur id. Vivamus sit amet suscipit quam, a efficitur ante. Integer in luctus diam. Integer fringilla felis risus, vitae vehicula quam pharetra vel. Maecenas ligula lacus, lobortis a condimentum sit amet, faucibus sit amet nisi. Donec mattis scelerisque fringilla.</p>
</div>
</div><!-- /page4 -->
<div data-role="page" class="jqm-demos ui-responsive-panel" id="page5" data-title="Panel responsive page">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>Page 5</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium pretium nisi in semper. Integer lectus nibh, fermentum rutrum sagittis vel, sagittis in sem. Praesent condimentum, orci vitae dapibus laoreet, augue odio luctus arcu, eget ultrices lacus ligula non mi. Mauris aliquam et ligula vel mollis. Curabitur pulvinar quis augue id tempus. Phasellus rutrum rhoncus mauris, vel tincidunt sapien porttitor eget. Vivamus sagittis lacus non felis rhoncus, sed feugiat odio ornare. Praesent at sapien vel dolor gravida imperdiet. Nulla mi felis, elementum eget sapien ac, cursus lobortis risus. Aliquam in lacus in arcu placerat laoreet et quis nulla. Morbi et nunc ultricies, molestie augue a, tempor ipsum. Vestibulum non mi mattis, dapibus magna non, condimentum risus. Nam fermentum, ligula ultrices rhoncus vestibulum, augue diam feugiat elit, vitae tincidunt urna odio at erat. Maecenas in mattis libero.</p>
<p>Sed pulvinar nibh nulla, vitae dapibus odio faucibus id. Curabitur rutrum sodales dolor. Suspendisse mattis semper dapibus. Nullam iaculis tristique orci, ut consectetur augue accumsan eget. Duis turpis massa, egestas at lobortis nec, mollis eget sapien. Aliquam sed blandit lacus, ac fringilla nunc. Praesent quis faucibus magna, a imperdiet nulla. Pellentesque tristique, elit ut cursus tristique, ex turpis placerat dolor, non vehicula sem urna a nibh. In tristique hendrerit ex nec rutrum. Aenean sodales erat nisl, sed consequat enim consectetur id. Vivamus sit amet suscipit quam, a efficitur ante. Integer in luctus diam. Integer fringilla felis risus, vitae vehicula quam pharetra vel. Maecenas ligula lacus, lobortis a condimentum sit amet, faucibus sit amet nisi. Donec mattis scelerisque fringilla.</p>
</div>
</div><!-- /page5 -->
回答by ED-209
My approach is similar to other answers here but sufficiently different to warrant a post.
我的方法与此处的其他答案相似，但完全不同以保证发布。
In my multipage project I build my nav panel in the first page like so:
在我的多页项目中，我在第一页中构建了导航面板，如下所示：
<div data-role="page" id="index">
<div data-role="panel" data-position-fixed="true" data-theme="a" id="nav-panel">
<ul data-role="listview" data-theme="a" class="nav-search">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#" data-destination="#home">Home</a></li>
<li><a href="#" data-destination="#search">Search</a></li>
<li><a href="#" data-destination="#about">About</a></li>
</ul>
</div>
<!-- etc.... -->
And then in subsequent pages I add a div with a suitable classname to identify it:
然后在随后的页面中，我添加了一个具有合适类名的 div 来标识它：
<div data-role="page" id="search">
<div class="navPanelChild"></div>
<!-- etc.... -->
And then on the pagebeforecreate event of the first page of the app I clone the nav panel and replace all the child containers with it:
然后在应用程序第一页的 pagebeforecreate 事件上，我克隆导航面板并用它替换所有子容器：
$(document).delegate("#index", "pagebeforecreate", function () {
var navpanelCopy = $( "#nav-panel" ).clone();
$( ".navPanelChild" ).replaceWith(navpanelCopy);
});
回答by Jay Mayu
Panel is a new concept introduced in 1.3. So lets hope more tutorials will show up soon. As of your problem, I guess its better you code a panel in each of your pages. You can make changes to your page real time but make sure to call following method as documented in the documentation.
Panel 是 1.3 中引入的新概念。所以让我们希望更多的教程很快就会出现。至于您的问题，我想您最好在每个页面中编写一个面板。您可以实时更改页面，但请确保按照文档中的说明调用以下方法。
$( "#mypanel" ).trigger( "updatelayout" );
I'm not sure other ways would be feasible.
我不确定其他方式是否可行。
回答by user2041042
I had the same problem and ended using iframeto load the persistent contenent (in my case a sophisticated search form) from a file:
我遇到了同样的问题并结束使用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 sends a message to the main page whenever the user has submitted a search criteria as:
每当用户提交搜索条件时，sform.html 就会向主页发送一条消息：
window.parent.postMessage({action:"search",params:criteria},'*');
and the main page captures it like that:
主页像这样捕获它：
window.onmessage = function (e) {
if (e.data.action == "search") {
var criteria = e.data.params;
loadHotelListPage(criteria);
}
};
I know it is weird, but it works
我知道这很奇怪，但它有效
回答by Monte Hayward
"A panel cannot be placed outside a page, but this constraint will be removed in a future version." (From http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/)
“面板不能放置在页面外，但此限制将在未来版本中删除。” （来自http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/）
This ability would seem to be the key to make panel most useful and convenient as a whole-app navigation device.
这种能力似乎是使面板作为全应用导航设备最有用和最方便的关键。
回答by jtblin
For panel, and header and footer, I create a template (I use dustjs) for each element. In the pagebeforecreateevent, I append the html into the current page. You have to use pagebeforecreateevent if you want JQM to 'enhance' the html. If you don't care about this, you can use the `pagecreate' event.
对于面板、页眉和页脚，我为每个元素创建了一个模板（我使用了dustjs）。在这种情况pagebeforecreate下，我将 html 附加到当前页面中。pagebeforecreate如果您希望 JQM“增强”html，则必须使用事件。如果你不关心这个，你可以使用 `pagecreate' 事件。
