4

スクロール可能なJqueryツールを使用して、iPad用のタッチベースのスライドショーを使用しています

http://jquerytools.org/demos/scrollable/vertical.html

それはうまく機能し、私が望むすべてを行いますが、指がスライダーのどこかにあり、少しずつ動くと、スライダーがトリガーされてスライダーが変更されます。スライドを変更するために指をドラッグする必要がある量を変更する方法はありますか?または、スワイプしてスライドを変更できる特定の領域を設定しますか?

4

2 に答える 2

4

次のように、オブジェクトの「コンストラクター」でタッチ イベントを無効にします。

            root = $('#content').scrollable({
                keyboard:false,
                mousewheel: false,
                touch: false
            });
于 2012-06-19T04:14:47.897 に答える
2

ScrollableがiPadで非常に敏感だった場合、私は同様のことをする必要がありました。水平方向のスワイプの感度を下げるために変更したものは次のとおりです。

// 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;
            self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();                
            e.preventDefault();
        }
    };
}

になる

// 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;
            if(deltaX > 200 || deltaX < -200) { // new line
                self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();    
            } // new line
            e.preventDefault();
        }
    };
}

次のスライドに変わる前に、指をドラッグしなければならない距離になるように200を調整します。同様に、垂直スクローラーを制御する場合は、新しいコードのdeltaXをdeltaYに変更します。

if(deltaY > 200 || deltaY < -200) { // new line
  self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();    
} // new line

最小化されたバージョンのjQueryToolsを使用している場合は、次のコードを使用できます。

// horizontal change
if(h > 200 || h < -200) {
  b[j && d > 0 || !j && h > 0 ? "next" : "prev"]();
}

// vertical change
if(d > 200 || d < -200) {
  b[j && d > 0 || !j && h > 0 ? "next" : "prev"]();
}
于 2013-03-06T13:56:00.227 に答える