2012-08-13 14 views
5

Tengo jquery tools scroller ... me gusta tener la opción touch implementada para swipeLeft swipeRight solamente.Jquery Tools Touch horizontal solo desactivar vertical touch

Cuando uso táctil: verdad, lo hace cuando se gira swipeUp/abajo, así ..

que siguió las instrucciones aquí:

jQuery Tools Scrollable on touch disable vertical scroll

y aquí:

http://awardwinningfjords.com/2010/09/22/handling-touch-events-in-jquery-tools-scrollable.html

pero ninguno parece funcionar ... alguna idea? mi violín/demo es a continuación como referencia

violín: http://jsfiddle.net/mmp2m/7/

demo: http://jsfiddle.net/mmp2m/7/show

Gracias

Respuesta

5

Si el único control que está utilizando es Scrollable entonces se podría editar el código fuente de here para corregir ese comportamiento o adaptarlo como mejor le parezca.

que modificó el fiddle que había publicado para incluir el código del control Scrollable en la sección JavaScript código.

Las líneas añadidas en el código para el control son los que tienen el comentario // added al final en el siguiente fragmento:

// touch event 
    if (conf.touch) { 
     var touch = {}; 

     itemWrap[0].ontouchstart = function(e) { 
      var t = e.touches[0]; 
      touch.x = t.clientX; 
      touch.y = t.clientY; 
     }; 

     itemWrap[0].ontouchmove = function(e) { 

      // only deal with one finger 
      if (e.touches.length == 1 && !itemWrap.is(":animated")) {    
       var t = e.touches[0], 
        deltaX = touch.x - t.clientX, 
        deltaY = touch.y - t.clientY, 
        absX = Math.abs(deltaX),        // added 
        absY = Math.abs(deltaY);        // added 

       // Only consider the event when the delta in the 
       // desired axis is greater than the one in the other. 
       if(vertical && absY > absX || !vertical && absX > absY) // added 
        self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev'](); 

       e.preventDefault(); 
      } 
     }; 
    } 

He intentado esto en Android con los navegadores nativos y Opera y parece para trabajar como se espera

+0

Intenté modificar el código pero sin suerte ... configuré 'deltaY = 0' y' vertical && deltaY> 0 || 'pero no funcionó ... pero tu solución funciona :) puede dime que || y? ¿Media? – MonteCristo

+0

El '?' Se usa para expresar una instrucción en línea 'if', su estructura es' boolean-expr? then-expr: else-expr; '. El '||' es simplemente el operador lógico 'o' que se está utilizando en' boolean-expr' de la instrucción 'if' en línea. Para obtener más información sobre el operador '?', Consulte esta pregunta SO: http://stackoverflow.com/questions/10270351/how-to-write-a-inline-if-statement-in-javascript –

+1

Tenía un error leve donde e.preventDefault(); impedido el desplazamiento por la página cuando se pasa ... la versión fija está aquí http://jsfiddle.net/shavindra/nvyU8/4/ – MonteCristo

0

he tenido problemas con el mismo tema por un tiempo hasta que encontré la siguiente FIX-

Initialization-

var $scroller1 = $('#outer-container1').kinetic({'y':false}); 

Esto evita desplazamiento vertical en el contenedor, pero no entrega el desplazamiento vertical de la navegador de desplazamiento.

Luego vaya al código fuente de jquery cinético y comente el e.preventDefault() para todos los eventos de acción del mouse y de desplazamiento.

Este truco funcionó para mí. https://github.com/davetayls/jquery.kinetic/issues/33