1

単一のjQueryモバイルページで複数のDIV間をスワイプする方法は? 

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

swipeleftjQueryモバイルでイベントを使用しましswiperightたが、ページでのみ機能します(data-role="page")

DIV 要素の実装方法を教えてください。

4

1 に答える 1

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;
    }
})
});
于 2012-12-05T15:13:18.977 に答える