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

Question

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

我正在开发一个需要在许多页面上具有相同面板的应用程序。除了复制代码，有没有办法将面板动态注入(inject)这些页面，以便它仍然保留 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>

注:使用外部面板时 data-theme应该添加到面板 div，因为它不继承任何样式/主题。

Demo

方案二:

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

Demo

注:确保您使用 .one()不是 .on() ，如果您使用后者，则每当创建页面时都会添加面板。

jQuery 移动 <= 1.3

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

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

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

更新

有两个 alternative methods动态注入(inject)“外部面板”。