添加填充到jQuery UI Slider

Question

有没有一种简单的方法可以将填充添加到jQuery UI Slider的滑块？我希望能够让滑块手柄不能到达杆的两端.所以如果这是常规的左端:

no padding
\/
[]------------------

我希望它在左(和右)端有填充:

padding of 10px for instance
\/
--[]----------------

我在css文件中试过这个:

.ui-slider-horizontal { height: .8em; padding: 0 10px; }

但似乎jQuery UI Slider使用complete(outerWidth())宽度来确定句柄的滑动范围,而不是没有填充的宽度.我也试过破解代码,替换outerWidth()为width(),但它没有做任何事情.

我明确地不想诉诸于设置最小值和最大值的黑客.值应始终按预期工作.

有什么建议？

编辑:

继pkauko的评论之后; 我使用滑块作为在其上方有三个标签的元素:

   not                      very
important    important    important
----[]-----------[]----------[]----

上图显示了我希望手柄出现的位置,位于标签下方的中心位置.但是酒吧在视觉上需要伸展到边缘.

Answer 1

好吧,我经常想要自己,但从来没有动机真的坐下来,所以有关它的事情.既然你现在问过,我确实坐下来攻击jQuery UI的滑块,根据你的要求添加填充选项.

注意:我只为具有单个手柄的水平滑块添加了它.其他情况并不复杂.我只是没有动力进行打字和后续测试,以涵盖可能现在不需要的案例.

在您从jQuery UI中包含原始Slider之后包含此代码.扩展名覆盖了几个方法,并将选项'paddingMin'和'paddingMax'添加到Slider小部件中(值必须是数字并且将被解释为像素;显然,这也可以很容易地扩展到其他单位,但是意味着更多的打字/测试目前未经审查的案件).

简单示例用法:

$('#slider').slider({ paddingMin: 50, paddingMax: 100 });

扩展黑客代码(按原样提供,不要起诉我):

(
    function($, undefined)
    {
        $.ui.slider.prototype.options =
            $.extend(
                {},
                $.ui.slider.prototype.options,
                {
                    paddingMin: 0,
                    paddingMax: 0
                }
            );

        $.ui.slider.prototype._refreshValue =
            function() {
                var
                    oRange = this.options.range,
                    o = this.options,
                    self = this,
                    animate = ( !this._animateOff ) ? o.animate : false,
                    valPercent,
                    _set = {},
                    elementWidth,
                    elementHeight,
                    paddingMinPercent,
                    paddingMaxPercent,
                    paddedBarPercent,
                    lastValPercent,
                    value,
                    valueMin,
                    valueMax;

                if (self.orientation === "horizontal")
                {
                    elementWidth = this.element.outerWidth();
                    paddingMinPercent = o.paddingMin * 100 / elementWidth;
                    paddedBarPercent = ( elementWidth - ( o.paddingMin + o.paddingMax) ) * 100 / elementWidth;
                }
                else
                {
                    elementHeight = this.element.outerHeight();
                    paddingMinPercent = o.paddingMin * 100 / elementHeight;
                    paddedBarPercent = ( elementHeight - ( o.paddingMin + o.paddingMax) ) * 100 / elementHeight;
                }

                if ( this.options.values && this.options.values.length ) {
                    this.handles.each(function( i, j ) {
                        valPercent =
                            ( ( self.values(i) - self._valueMin() ) / ( self._valueMax() - self._valueMin() ) * 100 )
                            * paddedBarPercent / 100 + paddingMinPercent;
                        _set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
                        $( this ).stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );
                        if ( self.options.range === true ) {
                            if ( self.orientation === "horizontal" ) {
                                if ( i === 0 ) {
                                    self.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { left: valPercent + "%" }, o.animate );
                                }
                                if ( i === 1 ) {
                                    self.range[ animate ? "animate" : "css" ]( { width: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );
                                }
                            } else {
                                if ( i === 0 ) {
                                    self.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { bottom: ( valPercent ) + "%" }, o.animate );
                                }
                                if ( i === 1 ) {
                                    self.range[ animate ? "animate" : "css" ]( { height: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );
                                }
                            }
                        }
                        lastValPercent = valPercent;
                    });
                } else {
                    value = this.value();
                    valueMin = this._valueMin();
                    valueMax = this._valueMax();
                    valPercent =
                        ( ( valueMax !== valueMin )
                        ? ( value - valueMin ) / ( valueMax - valueMin ) * 100
                        : 0 )
                        * paddedBarPercent / 100 + paddingMinPercent;

                    _set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";

                    this.handle.stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );

                    if ( oRange === "min" && this.orientation === "horizontal" ) {
                        this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { width: valPercent + "%" }, o.animate );
                    }
                    if ( oRange === "max" && this.orientation === "horizontal" ) {
                        this.range[ animate ? "animate" : "css" ]( { width: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
                    }
                    if ( oRange === "min" && this.orientation === "vertical" ) {
                        this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { height: valPercent + "%" }, o.animate );
                    }
                    if ( oRange === "max" && this.orientation === "vertical" ) {
                        this.range[ animate ? "animate" : "css" ]( { height: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
                    }
                }
            };

        $.ui.slider.prototype._normValueFromMouse =
            function( position ) {
                var
                    o = this.options,
                    pixelTotal,
                    pixelMouse,
                    percentMouse,
                    valueTotal,
                    valueMouse;

                if ( this.orientation === "horizontal" ) {
                    pixelTotal = this.elementSize.width - (o.paddingMin + o.paddingMax);
                    pixelMouse = position.x - this.elementOffset.left - o.paddingMin - ( this._clickOffset ? this._clickOffset.left : 0 );
                } else {
                    pixelTotal = this.elementSize.height - (o.paddingMin + o.paddingMax);
                    pixelMouse = position.y - this.elementOffset.top - o.paddingMin - ( this._clickOffset ? this._clickOffset.top : 0 );
                }

                percentMouse = ( pixelMouse / pixelTotal );
                if ( percentMouse > 1 ) {
                    percentMouse = 1;
                }
                if ( percentMouse < 0 ) {
                    percentMouse = 0;
                }
                if ( this.orientation === "vertical" ) {
                    percentMouse = 1 - percentMouse;
                }

                valueTotal = this._valueMax() - this._valueMin();
                valueMouse = this._valueMin() + percentMouse * valueTotal;

                return this._trimAlignValue( valueMouse );
            };
    }
)(jQuery);