javascript - 如何重用此JQM函数，而不是将其复制5次？

我看到了这个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页。如何在每个页面上重用该功能而不是复制它？

最佳答案

我建议使用可以从任何页面访问的外部面板。外部面板应放置在任何页面的外部，即应该是所有页面的同级对象，是页面容器的子代。

<!-- 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触发时，都需要运行代码。此外，要定位触发滑动事件的页面中的面板，您需要使用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");
        }
    });
});