jQuery Mobile 1.3.1具有非常好的滑动面板功能，但面板代码必须放在它所使用的同一页面中。
我正在开发一个需要在许多页面上拥有相同面板的应用。有没有一种方法可以动态地将面板注入这些页面，以便它仍然保留jqm面板功能？
答案 0 :(得分：28)
解决方案一：
使用可从任何页面访问的外部面板，以防万一您希望所有页面都有相同的面板内容。
仅在$.mobile.pageContainer上将面板添加到pagebeforecreate ，然后使用$(".selector").panel() 增强面板。
var panel = '<div data-role="panel" id="mypanel" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.prepend(panel);
$("#mypanel").panel();
});
添加按钮以打开每个标题中的面板（或任何您想要的位置）。
<a href="#mypanel" class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-grid ui-corner-all"></a>
注意：使用外部面板时 data-theme应添加到面板div中，因为它不会继承任何样式/主题。
<强> Demo
解决方案二：
如果您希望在添加面板之前对其进行更改，请根据DOM中的页面数量，使用不同的 ID为每个面板添加面板，并使用按钮打开该面板。
请注意，您无需调用任何类型的增强功能，因为您在pagebeforecreate上添加了面板。因此，一旦页面创建，面板将自动初始化。
var p = 1,
b = 1;
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.find("[data-role=page]").each(function () {
var panel = '<div data-role="panel" id="mypanel' + p + '" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';
$(this).prepend(panel);
p++;
});
$.mobile.pageContainer.find("[data-role=header]").each(function () {
var panelBtn = '<a href="#mypanel' + b + '" class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-grid ui-corner-all"></a>'
$(this).append(panelBtn);
b++;
});
});
<强> Demo
注意：确保使用.one()而不是.on()，如果使用后者，则会在创建页面时添加面板。
您可以这样做，使用pagebeforecreate事件并检查是否已添加Panel。请记住，面板标记应始终放在[data-role=header]之前，这就是我使用.before()的原因。
由于在pagebeforecreate上添加了面板，因此无需调用任何增强方法。在该事件期间，它们将被初始化。
<强> Demo
您的小组
var panel = '<div data-role="panel" id="mypanel" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';
动态添加面板
$(document).on('pagebeforecreate', '[data-role=page]', function () {
if ($(this).find('[data-role=panel]').length === 0) {
$('[data-role=header]').before(panel);
}
});
有两个alternative methods动态注入“外部面板”。
答案 1 :(得分：4)
对于遇到此问题的人来说，JQuery Mobile 1.4+中有一个名为External Panels的东西，可以让我们的生活更轻松。
http://demos.jquerymobile.com/1.4.0/panel-external/
你可以这样做。
<div data-role="panel" id="mainPanel">
<!-- .... -->
</div>
<div data-role="page" id="page1" >
<!-- .... -->
</div>
<div data-role="page" id="page2" >
<!-- .... -->
</div>
答案 2 :(得分：3)
你也可以做一件事，在所有页面的末尾或开头创建一个面板，然后通过下面提到的Id和脚本代码打开它.....它对我来说很好。
$(function(){
$("#navigation").enhanceWithin().panel();
});<div data-role="page" id="page1">
<div data-role="main" class="ui-content ui-body-a ui-responsive">
<div data-role="header">
<div data-role="navbar">
<ul>
<li class="">
<a href="#navigation" id="navi_toggle" class="ui-btn ui-corner-all ui-icon-grid ui-btn-icon-notext"></a>
</li>
</li>
</ul>
</div>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="main" class="ui-content ui-body-a ui-responsive">
<div data-role="header">
<div data-role="navbar">
<ul>
<li class="">
<a href="#navigation" id="navi_toggle" class="ui-btn ui-corner-all ui-icon-grid ui-btn-icon-notext"></a>
</li>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-panel ui-panel-position-left ui-panel-display-reveal ui-body-b ui-panel-animate ui-panel-open" data-role="panel" id="navigation" data-position="left" data-display="overlay" data-theme="b" data-dismissible="true" data-swipe-close="true">
<div class="ui-panel-inner">
<a href="#demo-links" data-rel="close" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext" id="navi_ref"></a>
<ul class="">
</ul>
</div>
</div>
答案 3 :(得分：0)
为了让hashcoder对工作做出响应，你需要初始化外部面板。同时添加.enhanceWithin()以使列表视图等在面板中正确呈现。
Als将data-rel=...属性添加到您要通过其打开外部面板的链接。
<script>
$(function () {
$("div[data-role='panel']").panel().enhanceWithin();
});
</script>
<div data-role="panel" id="mainMenu">
<!-- .... -->
</div>
<div data-role="page" id="page1" >
<a href="#mainMenu" data-rel="main-menu-panel">Open main menu panel</a>
<!-- .... -->
</div>
<div data-role="page" id="page2" >
<a href="#mainMenu" data-rel="main-menu-panel">Open main menu panel</a>
<!-- .... -->
</div>