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

您有两个解决方案：

解决方案一：

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

仅在$.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>

<强> 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不起作用。

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

2 个答案: