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

Question

jQuery Mobile 1.3.1有一个非常好的滑动面板功能，但是面板代码必须放在它所使用的同一个页面中。

我正在工作的一个应用程序，需要在许多页面上有相同的面板。除了复制代码之外，是否有一种方法可以动态地将面板注入到这些页面中，使其仍然保留jqm面板功能?

Answer 1

jQuery Mobile>= 1.4

• 解决方案一:

  使用外部面板，可以从任何页面访问，这是如果你想在所有页面有相同的面板内容。

  仅在pagebeforecreate上将面板附加到$.mobile.pageContainer 一次，然后使用$(".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，因为它不继承任何样式/主题。

---

• 解决方案二:

  如果您希望在附加面板之前对其进行更改，根据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++;
      });
  });
  

注意:确保您使用.one()而不是.on()，如果您使用后者，面板将在创建页面时添加。

---

jQuery Mobile <= 1.3

你可以这样做，使用pagebeforecreate事件，并检查是否已经没有添加面板。请记住，面板标记应该始终放在[data-role=header]之前，这就是我使用.before()的原因。

不需要调用任何增强方法，因为面板已在pagebeforecreate上添加。它们将在该事件期间初始化。

你的面板

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

---

更新

有两种方法可以动态注入"External Panel"

Answer 2

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

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>

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

Answer 4

为了使hashcoder的响应工作，您需要初始化外部面板。还可以添加.enhanceWithin()，使列表视图等在面板内正确渲染。

也添加一个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>