Question

我有一个ui范围滑块。我已经更改了脚本以添加其他范围和句柄。我试图禁用其中一个句柄，（显示整个部分总是会成为计算的一部分，因此不应该是可变的，但需要是一个可见的部分）。

我在幻灯片中尝试过： if（ui.value == ui.values [3]＆amp;＆amp; ui.value＆gt; 98）{ 关（）;

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

同时使用off（）并返回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');

但这些也不起作用。有什么建议？我是新手并输了。谢谢！

Answer 1

据我所知，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;
    }
});

Answer 2

Define the handles yourself within the slider div:

<div id="slider-range">
  <div class="ui-slider-handle first-handle"></div>
  <div class="ui-slider-handle second-handle"></div>
</div>

Disable all interactions with the slider:

.ui-widget {
    pointer-events: none;
}

And set the according css style to enable interaction:

#slider-range.ui-slider .ui-slider-handle.first-handle {
    pointer-events: all;
}

Everything but the first handle is now disabled

Answer 3

我通过以下方式进行了管理：

 $ ('.ui-slider .ui-slider-handle:first').draggable( false);

jquery ui slider-尝试禁用单个句柄

3 个答案: