javascript - 我怎样才能重用这个 JQM 函数而不是复制它 5 次？

Question

我看到了这个demo page我使用 JQM 在我的页面中构建它。但是，要滑动打开面板，需要以下功能:

$( document ).on( "pagecreate", "#demo-page", function() {
    $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft" ) {
                $( "#right-panel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#left-panel" ).panel( "open" );
            }
        }
    });
});

但我还有 4 个其他页面。如何为每个页面重用该函数而不是复制它？

Answer 1

我建议使用可以从任何页面访问的外部面板。 外部面板应该放置在任何页面之外，即应该是所有页面的兄弟，页面容器 em>.

<!-- external panel -->
<div data-role="panel" id="myPanel">
  <!-- content -->
</div>

<!-- pages -->
<div data-role="page" id="p1">
  <!-- content -->
</div>

<div data-role="page" id="p1">
  <!-- content -->
</div>

然后手动初始化它并增强它的内容。

$(function () {
   $("#myPanel").panel().enhanceWithin();
});

要添加滑动 监听器，请运行一次代码.one()在 pagecreate .

$(document).one("pagecreate", function () {
    $(document).on("swipeleft", function (e) {
        if ($(".ui-page-active").jqmData("panel") !== "open") {
            $("#myPanel").panel("open");
        }
    });
});

---

但是，如果您想为每个页面使用不同的面板，那么您需要在任何时候运行代码 pagecreate利用 event.target 触发.此外，要在触发swipe 事件的页面中定位面板，您需要使用activePage 方法。

我忘了说 pagecreate每页触发一次事件，因此，下面的代码将每页执行一次。

$(document).on("pagecreate", function (e) {
    $(e.target).on("swipeleft", function (e) {
        var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
        if (activePage.jqmData("panel") !== "open") {
            $("[data-role=panel]", activePage).panel("open");
        }
    });
});