面板在 jquery mobile 1.4.1 中无法正常工作？

Question

您好，我正在按照此示例在多个页面中创建面板。它在 jquery mobile 1.3.2 中完美运行

HTML

<div data-role="page" id="p1">
    <!-- header -->
    <div data-role="header"> <a href="#mypanel" data-role="button" data-inline="true" data-icon="grid" data-iconpos="notext"></a>
        <h1>Header</h1>
    </div>
    <!-- content -->
    <div data-role="content">
        <h1>contents</h1>
        <a data-role="button" href="#p2">Page 2</a>
    </div>
    <!-- footer -->
    <div data-role="footer">
        <h1>Footer</h1>
    </div>
</div>

<!-- page -->
<div data-role="page" id="p2">
    <!-- header -->
    <div data-role="header"> <a href="#mypanel" data-role="button" data-inline="true" data-icon="grid" data-iconpos="notext"></a>
        <h1>Header</h1>
    </div>
    <!-- content -->
    <div data-role="content">
        <h1>contents</h1>
        <a data-role="button" href="#p1">Page 1</a>
        <a data-role="button" href="#p3">Page 3</a>
    </div>
    <!-- footer -->
    <div data-role="footer">
        <h1>Footer</h1>
    </div>
</div>

<!-- page -->
<div data-role="page" id="p3">
    <!-- header -->
    <div data-role="header"> <a href="#mypanel" data-role="button" data-inline="true" data-icon="grid" data-iconpos="notext"></a>
        <h1>Header</h1>
    </div>
    <!-- content -->
    <div data-role="content">
        <h1>contents</h1>
        <a data-role="button" href="#p2">Page 2</a>
    </div>
    <!-- footer -->
    <div data-role="footer">
        <h1>Footer</h1>
    </div>
</div>

JAVASCRIPT

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);
    }
    $(document).on('pagebeforeshow', '[data-role=page]', function () {
        $(this).trigger('pagecreate');
    });
});

当我在 jquery mobile 1.4.1 中使用此示例时，它无法正常工作。面板最初只能工作，但是当我转到下一页时，面板无法正常工作？如何解决这个问题

Answer 1

您有两种解决方案：

• 解决方案一：

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

  仅在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(panel);
    $("#mypanel").panel();
  });
  

  添加按钮以在每个标题（或任何您想要的位置）中打开面板。

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

  Demo

---

• 解决方案二：

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

  请注意，您无需调用任何类型的增强功能，因为您在 pagebeforecreate 上添加面板。因此，一旦页面创建，面板将自动初始化。

  var i = 1;
  
  var panel = '<div data-role="panel" id="mypanel"' + i + '"" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';
  
  var panelBtn = '<a href="#mypanel"' + i + '"" class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-grid ui-corner-all"></a>'
  
  $(document).one('pagebeforecreate', function () {
      $.mobile.pageContainer.find("[data-role=page]").each(function () {
          $(this).prepend(panel);
      });
      $.mobile.pageContainer.find("[data-role=header]").each(function () {
          $(this).append(panelBtn);
      });
      i++;
  });
  

  Demo

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

Answer 2

面板的创建工作正常。但是面板中提供的 href 不起作用。