添加填充到jQuery UI Slider

前端之家收集整理的这篇文章主要介绍了添加填充到jQuery UI Slider前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有一种简单的方法可以将填充添加到jQuery UI Slider的滑块?我希望能够让滑块手柄不能到达杆的两端.所以如果这是常规的左端:
no padding
\/
[]------------------

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

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

我在css文件中试过这个:

.ui-slider-horizo​​ntal {height:.8em;填充:0 10px; }

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

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

有什么建议?

编辑:

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

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

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

解决方法

好吧,我经常想要自己,但从来没有动机真的坐下来,所以有关它的事情.
既然你现在问过,我确实坐下来攻击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 ) + "%" },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,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 ) + "%" },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 ) + "%" },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);
原文链接:https://www.f2er.com/jquery/175795.html

猜你在找的jQuery相关文章