Jquery mobile 如何使用jquery mobile将同一面板注入多个页面

jquerymobile1.3.1有一个非常好的滑动面板特性，但是面板代码必须放在它使用的同一页面中

我正在开发一个应用程序，它需要在许多页面上有相同的面板。有没有一种方法可以代替复制代码，动态地将面板插入到这些页面中，以便它仍然保留jqm面板功能？

jQuery Mobile>=1.4

• 解决方案一：
  使用可从任何页面访问的外部面板，以防您希望在所有页面中具有相同的面板内容
  将面板附加到

  $.mobile.pageContainer

  一次，仅在创建之前的

  pagebefore

  上，然后使用

  $（“.selector”）.panel（）增强面板
  
  
  

注意：请确保使用

.one（）

而不是

.on（）

，如果使用后者，则在创建页面时会添加面板

---

---

jquerymobile对于遇到这个问题的人来说，jquerymobile1.4+中有一个叫做外部面板的东西，它可以让我们的生活更轻松

你可以这样做

<div data-role="panel" id="mainPanel">
    <!-- .... -->
</div>

<div data-role="page" id="page1" >
     <!-- .... -->
</div>

<div data-role="page" id="page2" >
     <!-- .... -->
</div>

---

要使hashcoder的响应正常工作，您需要初始化外部面板。还要添加

.enhanceWithin（）

，使ListView等在面板中正确呈现

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>

$（函数（）{
$（“div[data role='panel']）.panel（）.enhanceWithin（）；
});

您还可以做一件事，在所有页面的末尾或开头创建一个面板，然后按下面提到的Id和脚本代码打开该面板……这对我来说很好

$（函数（）{
$（“#导航”）.enhanceWithin（）.panel（）；
});













Hi，根据您使用的开发平台，有很多方法可以实现这一点。例如，在.NET MVC中，您可以使用面板的代码（HTML/jQuery）创建一个局部视图，或者在Php中，您可以编写一个函数来呈现它，并将jQuery包含在您的公共js文件中。这是一个移动应用程序，所有代码都需要是javascript。下面的答案就是我想要的。谢谢，这正是我想做的。谢谢大家!@Omar这个JQM示例使用：$（function（）{$（（“body>[datarole='panel']））.panel（）；}）；我想这使得在“页面”上初始化所有面板成为可能。@PhillHealey
$（“[数据角色=面板]”）
，
$（“正文>[数据角色=面板]”）
，
$（“#面板ID”）
是相同的。您甚至可以使用
$（“.panelClass”）
选择器。选择任何最适合您的选择器。编辑：
$（“[data role=panel]”
true，它初始化所有面板。若要向注入内容添加样式，您可以使用
enhanceWithin（）
”，例如，
$（“#menu左”）.panel（）.enhanceWithin（）
。谢谢你，奥马尔。我发现你的许多帖子都非常有用。@David谢谢：）这里提到，如果我使用“a href”链接这些外部面板，它们将作为单独的页面而不是面板打开。你需要初始化面板<代码>$（函数（）{$（“div[data role='panel']）.panel（）.enhanceWithin（）；}）。见下面我的完整答案。
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++;
    });
});

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);
  }
});

<div data-role="panel" id="mainPanel">
    <!-- .... -->
</div>

<div data-role="page" id="page1" >
     <!-- .... -->
</div>

<div data-role="page" id="page2" >
     <!-- .... -->
</div>

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