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

问题描述

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

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.

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

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

• 解决方案一:

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

  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.

  仅在pagebeforecreate上将面板附加到$.mobile.pageContainer 一次，然后使用$(".selector").panel() 增强面板.

  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>
  

注意:使用外部面板 data-theme时应将其添加到面板div中，因为它不会继承任何样式/主题.

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

演示

Demo

---

• 解决方案二:

  ---

  • Solution two:

    如果您希望在添加面板之前对面板进行更改，请根据DOM中的页面数，为每个面板添加一个带有不同 ID和一个按钮的面板，以打开该面板.

    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.

    请注意，由于要在pagebeforecreate上添加面板，因此不需要调用任何增强功能.因此，一旦创建页面，面板就会自动初始化.

    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

  注意:请确保您使用的是.one()而不是.on()，如果使用的是.on()，则每次创建页面时都会添加面板.

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

  您可以使用pagebeforecreate事件并检查是否尚未添加面板来做到这一点.请记住，面板标记应始终放置在[data-role=header]之前，这就是我使用.before()的原因.

  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().

  由于在pagebeforecreate上添加了 panels ，因此无需调用任何 enhancement 方法.在该事件期间，它们将被初始化.

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

  演示

  Demo

  您的面板

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

  ---

  更新

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

  ---

  Update

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

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