我有一个ui范围滑块。我更改了脚本以添加其他范围和句柄。我正在尝试禁用其中一个句柄(以显示整体的一部分,该部分始终将成为计算的一部分,因此不应更改,而应是可见的片段)。

我在幻灯片中尝试过:
if(ui.value == ui.values [3] && ui.value> 98){
离开();

    }
           if ( ui.value == ui.values[3] && ui.value < 98 ) {
         off();
    }

同时使用off()和return false,然后将句柄本身卡住,但它仍在计算值,就好像它在移动一样。

因此,我尝试禁用-我尝试了:
$('A.ui-slider-handle').eq(2).draggable(false); //this somehow lets me drag it all over the page
$('A.ui-slider-handle').eq(2).attr('disabled', 'disabled');$('A.ui-slider-handle').eq(2).prop('disabled');
但是这些都不起作用。有什么建议么?我是新来的,迷路了。谢谢!

最佳答案

据我所知,jQuery UI滑块小部件无法禁用单个句柄。但是,如果您不介意扩展jQuery UI滑块小部件,则可以添加此功能。

在下面的代码中,我在jQuery UI滑块小部件中扩展了_mouseCapture函数,以防止鼠标移动/选择具有ui-slider-handle-disabled类的句柄。它有点大,因为我必须复制现有的_mouseCapture函数并添加几行。我用评论标记了我的插入内容。

您可以测试此代码here on jsfiddle

// extend jQuery UI slider widget's _mouseCapture function to allow disabling handles
// _mouseCapture function copied from jQuery UI v1.10.3
$.widget("ui.slider", $.ui.slider, {
    _mouseCapture: function (event) {
        var position, normValue, distance, closestHandle, index, allowed, offset, mouseOverHandle,
        that = this,
            o = this.options;

        if (o.disabled) {
            return false;
        }

        this.elementSize = {
            width: this.element.outerWidth(),
            height: this.element.outerHeight()
        };
        this.elementOffset = this.element.offset();

        position = {
            x: event.pageX,
            y: event.pageY
        };
        normValue = this._normValueFromMouse(position);
        distance = this._valueMax() - this._valueMin() + 1;
        this.handles.each(function (i) {
            // Added condition to skip closestHandle test if this handle is disabled.
            // This prevents disabled handles from being moved or selected with the mouse.
            if (!$(this).hasClass("ui-slider-handle-disabled")) {
                var thisDistance = Math.abs(normValue - that.values(i));
                if ((distance > thisDistance) || (distance === thisDistance && (i === that._lastChangedValue || that.values(i) === o.min))) {
                    distance = thisDistance;
                    closestHandle = $(this);
                    index = i;
                }
            }
        });

        // Added check to exit gracefully if, for some reason, all handles are disabled
        if(typeof closestHandle === 'undefined')
            return false;

        allowed = this._start(event, index);
        if (allowed === false) {
            return false;
        }
        this._mouseSliding = true;

        this._handleIndex = index;

        closestHandle.addClass("ui-state-active")
            .focus();

        offset = closestHandle.offset();
        // Added extra condition to check if the handle currently under the mouse cursor is disabled.
        // This ensures that if a disabled handle is clicked, the nearest handle will remain under the mouse cursor while dragged.
        mouseOverHandle = !$(event.target).parents().addBack().is(".ui-slider-handle") || $(event.target).parents().addBack().is(".ui-slider-handle-disabled");
        this._clickOffset = mouseOverHandle ? {
            left: 0,
            top: 0
        } : {
            left: event.pageX - offset.left - (closestHandle.width() / 2),
            top: event.pageY - offset.top - (closestHandle.height() / 2) - (parseInt(closestHandle.css("borderTopWidth"), 10) || 0) - (parseInt(closestHandle.css("borderBottomWidth"), 10) || 0) + (parseInt(closestHandle.css("marginTop"), 10) || 0)
        };

        if (!this.handles.hasClass("ui-state-hover")) {
            this._slide(event, index, normValue);
        }
        this._animateOff = true;
        return true;
    }
});

10-06 05:29
查看更多