2012-12-05 34 views
0

如何在单个jQuery移动页面中的几个DIV之间滑动?如何在单个jQuery移动页面中的几个DIV之间滑动?

<div data-role="page"> 
     <div data-role="content"> 
     <div> Content1 </div> 
     <div> Content1 </div> 
     <div> Content1 </div> 
     </div> 
    </div> 

和我一起工作swipeleft和jQuery Mobile的swiperight事件,但它的工作原理为(data-role="page")

可以说任何对DIV元素是如何实现只页面?

回答

0

我写的,我使用的爆炸挥笔码位,这可能是有帮助的,你

$(function() { 
var ftch, // first touch cache 
lck = Math.sin(Math.PI/4); //lock value, sine of 45 deg configurable 

var defSwipeDir = function (el, tchs) { // need define swaping direction, for better UX 
    if (typeof (tchs) !== 'object') return 0; // check if there was any movements since first touch, if no return 0 
    var ltch = tchs[tchs.length - 1], // last touch object 
     dx = ltch.pageX - ftch.pageX, 
     dy = ltch.pageY - ftch.pageY, 
     hyp = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)), 
     sin = dy/hyp, 
     cos = dx/hyp, 
     dir; 

    if (Math.abs(cos) >= lck) { // left or right swape 
     dir = cos > 0 ? 'r' : 'l'; 
    } else { // up or down 
     dir = sin < 0 ? 'u' : 'd'; 
    } 
    el.trigger('swipe', dir); // trigger custom swipe event 
    return dir; // and return direction too 
} 

$('.myelementTouchDetection').on('touchstart touchmove swipe', function (ev, d) { 
    var oev = ev.originalEvent, 
     myelementTouchDetection = $(this), 
     dir; // you may know swipes on move event too 

    switch (ev.type) { 
     case 'touchstart': 
      ftch = oev; 
      break; 
     case 'touchmove': 
      dir = defSwipeDir(myelementTouchDetection, oev.touches); 
      return false // cancel default behaiviour 
      break; 
     case 'swipe': 
      switch (d) { 
       case 'r': // swipe right 
        console.log('swipe right'); 
        break; 
       case 'l': // swipe left 
        console.log('swipe left'); 
        break; 
       case 'u': // swipe up 
        console.log('swipe up'); 
        break; 
       case 'd': // swipe down 
        console.log('swipe down'); 
        break; 
      } 
      break; 
    } 
}) 
});