5

我有一个 ui 范围滑块。我更改了脚本以添加额外的范围和句柄。我正在尝试禁用其中一个句柄（以显示始终将成为计算一部分的整体的一部分，因此不应更改，但需要是可见的部分）。

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

    }
           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');

但这些也不起作用。有什么建议么？我对此很陌生并且迷路了。谢谢！

4

3 回答 3

6

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

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

您可以在 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;
    }
});
于 2013-09-17T18:25:35.013 回答
2

在滑块 div 中自己定义句柄：

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

禁用与滑块的所有交互：

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

并设置相应的 css 样式以启用交互：

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

现在禁用除第一个句柄之外的所有内容

于 2016-08-31T18:05:17.880 回答
0

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

 $ ('.ui-slider .ui-slider-handle:first').draggable( false);
于 2014-04-22T16:21:51.560 回答