5

私はUIレンジスライダーを持っています。スクリプトを変更して、範囲とハンドルを追加しました。ハンドルの 1 つを無効にしようとしています (常に計算の一部になる全体の一部を表示するため、変更可能ではなく、可視セグメントである必要があります)。

スライド内で試してみました: 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 スライダー ウィジェットの拡張を気にしない場合は、この機能を追加できます。

以下のコード_mouseCaptureでは、jQuery 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 に答える
0

私はこれを管理しました：

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