0

我的应用程序有两个面板作为主布局，因此所有子页面都会有这两个面板。现在，我想为应用程序中的所有页面注册滑动事件，以便用户能够从任何地方访问这两个面板。我在这里创建了这个函数，这样我就可以调用它来从不同的地方注册：

function registerSwipeEvents() {
    //panel swipe from left and right for categories, favs.
    $(document).on("swipeleft swiperight", '[data-role=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.
        // We do this by checking the data that the framework stores on the page element (panel: open).
        if ($.mobile.activePage.jqmData("panel") !== "open") {
            if (e.type === "swipeleft") {
                $(".right-panel").panel("open");
            } else if (e.type === "swiperight") {
                $(".left-panel").panel("open");
            }
        }
    });
}

我试过从 pageinit（只运行一次脚本）、pagebeforeshow 和 pageshow（总是运行）调用这个函数，如下所示：

$('#HomePage').on('pageshow', function () {
    getFavouritesFromClient();

});

但是当我第二次从一页转到另一页时，该事件不适用于所有页面！也许我没有正确使用这些事件，但到目前为止，第一轮导航中最好的一个是 pageshow。

4

1 回答 1

0

此代码有助于在所有页面上注册滑动事件。

该pagecreate事件适用于所有页面（使用[data-role=page]）。在这个事件中，我们找到了那个特定页面的 ID $(this).attr('id')。然后我们单独使用该特定页面注册swipeleft和事件swiperight"#"+thisPageId

（我在代码中包含了几行代码，这有助于我弄清楚 - 对于那些有兴趣知道的人）

//var glbl; // this helped me find the attribute - global variable for accessing via the console
$( document ).on( "pagecreate", "[data-role=page]", function() {
    //console.log($(this)); // uncomment this line to see this DIV
    //glbl = $(debug); //uncomment this line to assign this DIV to global variable "glbl", which you can then access via the console
    var thisPageId = $(this).attr('id');
    $( document ).on( "swipeleft swiperight", "#"+thisPageId, 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" ) {
                $( "#panelRight" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#panelLeft" ).panel( "open" );
            }
        }
        console.log('on swipes');
    });
    console.log('on pagecreate');
});
于 2015-05-26T12:47:41.953 回答