JQuery сенсорная навигация - PullRequest
       3

JQuery сенсорная навигация

2 голосов
/ 21 февраля 2012

Приведенный ниже код добавляет сенсорную навигацию для android / ipads и т. Д. Добавляет скользящую навигацию к миниатюрам слайдов.Это прекрасно работает и все, но миниатюры не нажимаются на планшете с помощью касания.Вы можете щелкнуть их на ПК, и ползунок изменится на соответствующий слайд ... не на планшете, как будто касание или «щелчок» ничего не делает (смахивание работает отлично)

JS Fiddle

http://jsfiddle.net/Mottie/VM8XG/5165/

JS

$('#slider').anythingSlider({

navigationSize : 3,

// Callback when the plugin finished initializing
onInitialized: function(e, slider) {

    var time = 1000, // allow movement if < 1000 ms (1 sec)
        range = 50,  // swipe movement of 50 pixels triggers the slider
        x = 0, t = 0, touch = "ontouchend" in document,
        st = (touch) ? 'touchstart' : 'mousedown',
        mv = (touch) ? 'touchmove' : 'mousemove',
        en = (touch) ? 'touchend' : 'mouseup';

    slider.$window.add( slider.$controls )
        .bind(st, function(e){
            // prevent image drag (Firefox)
            e.preventDefault();
            t = (new Date()).getTime();
            x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX; 
        })
        .bind(en, function(e){
            t = 0; x = 0;
        })
        .bind(mv, function(e){
            e.preventDefault();
            var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
            r = (x === 0) ? 0 : Math.abs(newx - x),
            // allow if movement < 1 sec
            ct = (new Date()).getTime();
            if (t !== 0 && ct - t < time && r > range) {
                if (newx < x) { 
                    if ($(this).hasClass('anythingControls')) {
                        slider.$controls.find('.next').trigger('click');
                    } else {
                        slider.goForward();
                    }
                    return false;
                }
                if (newx > x) {
                    if ($(this).hasClass('anythingControls')) {
                        slider.$controls.find('.prev').trigger('click');
                    } else {
                        slider.goBack(); 
                    }
                }
                t = 0; x = 0;
                return false;
            }
        });
}

});​

Ответы [ 2 ]

0 голосов
/ 12 декабря 2012

Метод event.preventDefault() останавливает действие элемента по умолчанию.

Но вы только что удалили два действия:

e.preventDefault();
0 голосов
/ 23 апреля 2012

Я думаю, что это из-за события зависания - если вы дважды быстро нажмете на номерные вкладки (может потребоваться несколько ударов, чтобы поймать его!) На iPad, он успешно перейдет к изображению.

Не могу говорить за Android, но я заметил, что iPad делает эффекты при наведении на первый клик, поэтому, возможно, стоит просто просмотреть скрипт для слайдера изображений, чтобы выяснить, к каким событиям мыши он подключается (mouseover , наведите указатель мыши и т. д.) и отвяжите их в конце своего кода, где обнаружен планшет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...