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

Answer 2

这是一个anonimouse函数，只需给它一个名字，将它保存在* .js文件中，并将该文件包含在你的四个页面中。这里有一个名字的功能：

function withName( 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" );
                }
            }
        }

function moreName() {
        $( document ).on( "swipeleft swiperight", "#demo-page", withName);
    }

$( document ).on( "pagecreate", "#demo-page", moreName);

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

2 个答案: