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

Question

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

我正在开发一个需要在许多页面上拥有相同面板的应用程序.有没有一种方法可以动态地将面板注入这些页面,以便它仍然保留jqm面板功能？

Answer 1

jQuery Mobile> = 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>
  

注意:使用外部面板 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事件并检查是否已添加Panel.请记住,面板标记应该始终放在那之前[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);
  }
});

更新

有两种方法可以动态注入" 外部面板 ".