如何使用 jquery mobile 将同一个面板注入多个页面 [英] How to inject the same panel into multiple pages using jquery mobile

问题描述

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

我正在开发一个应用程序，它需要在多个页面上具有相同的面板.除了复制代码，有没有一种方法可以将面板动态注入这些页面，使其仍保留 jqm 面板功能?

解决方案

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(面板);$("#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);}});

<小时>

更新

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

jQuery Mobile 1.3.1 has a very nice sliding panel feature, but the panel code must be placed within the same page it's used on.

I'm working on an app that needs to have the same panel on many pages. Instead of replicating code is there a way to dynamically inject the panel into these pages so that it will still retain the jqm panel functionality?

解决方案

jQuery Mobile >= 1.4

• Solution one:

  Use an External panel that can be accessed from any page, this is in case you want to have the same panel contents in all pages.

  Append panel to $.mobile.pageContainer once only on pagebeforecreate and then enhance the panel using $(".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();
  });
  

  Add button to open the panel in each header (or wherever you want).

  <a href="#mypanel" class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-grid ui-corner-all"></a>
  

Note: When using External Panel data-theme should be added to panel div, as it doesn't inherit any styles/theme.

Demo

---

• Solution two:

  If you wish to do changes to panel before appending it, based on number of pages in DOM, add panel to each one with a different ID and a button to open that panel.

  Note that you don't need to call any kind of enhancement, because you're adding panels on pagebeforecreate. Hence, panels will be auto-initialized once page is created.

  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

Note: Make sure you use .one() not .on(), if you use the latter, panels will be added whenever a page is created.

---

jQuery Mobile <= 1.3

You can do it this way, using pagebeforecreate event and by checking if there is no Panel added already. Keeping in mind that panels markup should always be placed before [data-role=header] that's why I used .before().

There is no need to call any enhancement method since panels are added on pagebeforecreate. They will be initialized during that event.

Demo

Your panel

var panel = '<div data-role="panel" id="mypanel" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';

Add panels dynamically

$(document).on('pagebeforecreate', '[data-role=page]', function () {
  if ($(this).find('[data-role=panel]').length === 0) {
    $('[data-role=header]').before(panel);
  }
});

---

Update

There are two alternative methods to inject "External Panel" dynamically.

这篇关于如何使用 jquery mobile 将同一个面板注入多个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！