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

Question

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

我正在开发一个需要在许多页面上具有相同面板的应用程序。除了复制代码，有没有办法将面板动态注入这些页面，以便它仍然保留 jqm 面板功能？

Answer 1

jQuery 移动 >= 1.4

• 解决方案一：

  使用可以从任何页面访问的外部面板，以防您希望在所有页面中具有相同的面板内容。

  仅将面板附加到$.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>
  

注意：使用External Panel 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()not .on()，如果您使用后者，则在创建页面时将添加面板。

---

jQuery 移动 <= 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);
  }
});

---

更新

有两种替代方法可以动态注入“外部面板”。

Answer 2

对于遇到这个问题的人来说，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>

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

为了使哈希编码器能够响应工作，您需要初始化外部面板。还添加.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>