1

jQuery UI を使用して単純なスライダーを作成しましたが、少し間違った設定をしたに違いありません。動作しますが、スライダー ハンドルをクリックしてからマウスを少し下に移動すると、スライダーが数ピクセルジャンプします。

ここに例があります：http://jsfiddle.net/pLJE8/3/

これを改善する方法を知っている人はいますか？

ありがとう！

4

2 に答える 2

3

私はちょうど同じ問題を抱えていました。このサイトの時間範囲のサンプルを試していました

いくつかのテストの後、私はこのコードになりました。

<script type="text/javascript">
    $(document).ready(function () {
        $(".slider-timerange").slider({
            range: true,
            min: 0,
            max: 1439,
            values: [540, 1020],
            step: 5,
            slide: function (event, ui) {
                var val0 = ui.values[0];
                var val1 = ui.values[1];
                slideTime(val0, val1);
            }
        });

        var initialVal0 = $("#slider-timerange").slider("values", 0);
        var initialVal1 = $("#slider-timerange").slider("values", 1);
        slideTime(initialVal0, initialVal1);
    });

    function slideTime(val0, val1) {
        var minutes0 = parseInt(val0 % 60, 10);
        var hours0 = parseInt(val0 / 60 % 24, 10);
        var minutes1 = parseInt(val1 % 60, 10);
        var hours1 = parseInt(val1 / 60 % 24, 10);
        var startTime = getTime(hours0, minutes0);
        var endTime = getTime(hours1, minutes1);
        $("#time-range").text(startTime + ' - ' + endTime);
    }
</script>

次の呼び出しを行うことは、ジャンプを引き起こす罪人のようです。

var val0 = $("#slider-timerange").slider("values", 0);

PS: 私は JavaScript の達人ではありません ;)

于 2013-02-16T15:35:24.563 に答える
2

幅の左半分のマージンを設定するだけです

.ui-slider .ui-slider-handle{ //for vertical
    height: 30px;   
    margin-bottom:-15px;
}
.ui-slider .ui-slider-handle{ //for horizontal
    width: 30px;   
    margin-left:-15px;
}

それに応じてcssを設定します。

于 2013-12-21T09:55:31.233 に答える