基于滑动事件的jQuery Mobile中的更新菜单 [英] Update menu in jQuery Mobile based on swipe event

问题描述

我有一个基于click事件进行更新的菜单，这很容易，因为我可以将单击基于实际按钮，但是如何使菜单通过滑动对页面更改做出反应?

这是我的工作JSFiddle，它允许单击和滑动: http://jsfiddle.net/QFX5x/1/

我开始使用pagebeforeshow和.mobile.path.parseURL作为哈希标签，但是不一致.

        $(document).live("pagebeforeshow", function() {
            var obj = $.mobile.path.parseUrl(window.location.href);
            var newPage = '.' + obj.hash;

            alert(newPage);

            //$(newPage).addClass("active");
            //$(newPage).siblings().removeClass("active");
        });

解决方案

当我想模仿某种类型的事件时，我只是使用.trigger()在正确的元素上触发该事件，而不是重写我的代码来运行两种不同情况下的事件处理程序.由于您的代码可以与click事件一起使用，因此您可以基于当前的active列表项在正确的链接上触发click事件:

$(function(){

    //cache all of the list-items in the navigation div
    var $nav   = $('#nav').children().children(),

        //also cache the number of list-items found
        totNav = $nav.length;

    //notice the use of `.on()` rather than `.live()` since the latter is depreciated
    $(document).on('swipeleft', '.ui-page', function() {

        //get the next index based on the current list-item with the `active` class
        var next = ($nav.filter('.active').index() + 1);

        //if you're already on the last page then stop the function and do nothing
        if (next === totNav) {
            return;
            //you could use this next line to wrap to the beginning rather than not doing anything
            //next = 0;
        }

        //trigger a `click` event on the link within the list-item at the next index
        $nav.eq(next).children().trigger('click');

    //notice I'm chaining the `.on()` function calls on the `$(document)` selection
    }).on('swiperight', '.ui-page', function() {

        //get the previous index
        var prev = ($nav.filter('.active').index() - 1);

        if (prev === -1) {
            return;
            //you could use this next line to wrap to the beginning rather than not doing anything
            //prev = (totNav - 1);
        }
        $nav.eq(prev).children().trigger('click');
    }).on('click', '#nav a', function(e) {

        //more chaining
        $(this).parent().addClass("active").siblings().removeClass("active");
    });
});​

这是一个演示: http://jsfiddle.net/QFX5x/4/

I have a menu that is updating based on a click event, which is pretty easy because I can base the click on the actual button, but how do I make the menu react to page changes via swiping?

Here's my working JSFiddle that allows for clicks and swipes: http://jsfiddle.net/QFX5x/1/

I started to use pagebeforeshow and .mobile.path.parseURL for the hash tag, but it isn't consistent.

        $(document).live("pagebeforeshow", function() {
            var obj = $.mobile.path.parseUrl(window.location.href);
            var newPage = '.' + obj.hash;

            alert(newPage);

            //$(newPage).addClass("active");
            //$(newPage).siblings().removeClass("active");
        });

解决方案

When I want to mimic some type of event I just use .trigger() to trigger that event on the correct element rather than re-writing my code to run the event handler in two different situations. Since your code works with the click event, you can trigger a click event on the correct link based on the current active list-item:

$(function(){

    //cache all of the list-items in the navigation div
    var $nav   = $('#nav').children().children(),

        //also cache the number of list-items found
        totNav = $nav.length;

    //notice the use of `.on()` rather than `.live()` since the latter is depreciated
    $(document).on('swipeleft', '.ui-page', function() {

        //get the next index based on the current list-item with the `active` class
        var next = ($nav.filter('.active').index() + 1);

        //if you're already on the last page then stop the function and do nothing
        if (next === totNav) {
            return;
            //you could use this next line to wrap to the beginning rather than not doing anything
            //next = 0;
        }

        //trigger a `click` event on the link within the list-item at the next index
        $nav.eq(next).children().trigger('click');

    //notice I'm chaining the `.on()` function calls on the `$(document)` selection
    }).on('swiperight', '.ui-page', function() {

        //get the previous index
        var prev = ($nav.filter('.active').index() - 1);

        if (prev === -1) {
            return;
            //you could use this next line to wrap to the beginning rather than not doing anything
            //prev = (totNav - 1);
        }
        $nav.eq(prev).children().trigger('click');
    }).on('click', '#nav a', function(e) {

        //more chaining
        $(this).parent().addClass("active").siblings().removeClass("active");
    });
});​

Here is a demo: http://jsfiddle.net/QFX5x/4/

这篇关于基于滑动事件的jQuery Mobile中的更新菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！