Question

我在我的网站中使用jquery UI范围滑块，我需要为用户增加范围创建一个功能，而当用户缩小范围时需要创建另一个功能，我该怎么做？
感谢

function createRangeSliderOutOfIframe(kinorid) {
//alert("in edit");
var addRangeSlider = '<div class="rangeSlider"><p><label for="amount' + kinorid + '">Increase Range of Selection:</label></p><div id="slider-range' + kinorid + '"></div>'; //Jquery UI slider
$('#trackingInfo').append(addRangeSlider);
//$("#slider-range" + kinorid, window.parent.document).show();
var count = 0;
var result = $(this).parent();
var i;
$("#slider-range" + kinorid).slider({
    animate: true,
    step: 1,
    min: 0,
    max: 10,
    value: 5,

    change: function (event, ui) {
        var currentValue = ui.value;
        alert(currentValue + "original");
        var value = $("#slider-range" + kinorid).slider("option", "value");
        alert(value+"new");
        if (ui.value >= 5) {
            //if (!$(getSelectionParentElement).parent().prev().hasClass('kSelectedA') || !$(getSelectionParentElement).children().next().hasClass('rangeSlider')) {
            alert(count);
            var add = '<span class="kSelectedA">Link</span>';

            $("#myFrame").contents().find('*').each(function () {
                if ($(this).attr('kinorid') == kinorid) {
                    //alert("change");
                    if (count == 0) {
                        $(result).parent().before(add);
                        count += 1;
                    }
                    else if (count <= 5 && count != 0) {
                        result = $(this).parent();
                        for (i = 0; i < count; i++) {
                            result = $(result).parent();
                            //test += 1;
                        }
                        $(result).parent().before(add);
                        count += 1;
                        $('#trackingInfo').append('The range of the selection was increased<br/> ');
                        alert(count);
                    }

                }
            });

        }
        if (ui.value < 5) {
            //if (!$(getSelectionParentElement).parent().prev().hasClass('kSelectedA') || !$(getSelectionParentElement).children().next().hasClass('rangeSlider')) {
            count -= 1;
            alert("in if out");
            if ($(result).children().hasClass('kSelectedA')) {
                alert("in if");
                $(result + '.kSelectedA').remove();
            }
            //alert("second if");
            //$('.kSelectedA').remove();
        }

    }
});
/* $("#amount" + cId, window.parent.document).val($("#slider-range" + cId, window.parent.document).slider("values", 0) +
" - " + $("#slider-range" + cId, window.parent.document).slider("values", 1));*/

}

Answer 1

取自jQuery UI网站：

在幻灯片播放期间，每次鼠标移动都会触发此事件。使用ui.value（单处理滑块）获取当前句柄的值，$（..）。slider（'value'，index）以获取另一个句柄的值。

根据ui.value返回false以防止幻灯片。

代码示例

提供一个回调函数来处理作为init选项的slide事件。

$( ".selector" ).slider({
   slide: function(event, ui) { ... }
});
Bind to the slide event by type: slide.
$( ".selector" ).bind( "slide", function(event, ui) {
  ...
});

Answer 2

使用为您提供的change event。

使用jquery UI范围Slider

2 个答案: