有没有一种简单的方法可以将填充添加到jQuery UI Slider的滑块？我希望能够让滑块手柄不能到达杆的两端.所以如果这是常规的左端：
no padding \/ []------------------
我希望它在左(和右)端有填充：
padding of 10px for instance \/ --[]----------------
我在css文件中试过这个：
.ui-slider-horizontal {height：.8em;填充：0 10px; }
但似乎jQuery UI Slider使用完整(outerWidth())宽度来确定句柄的滑动范围,而不是没有填充的宽度.我也试图破解代码,用width()替换outerWidth(),但它没有做任何事情.
我明确地不想诉诸于设置最小值和最大值的黑客.值应始终按预期工作.
有什么建议？
编辑：
继pkauko的评论之后;我使用滑块作为在其上方有三个标签的元素：
not very important important important ----[]-----------[]----------[]----
上图显示了我希望手柄出现的位置,位于标签下方的中心位置.但是酒吧在视觉上需要伸展到边缘.
解决方法
好吧,我经常想要自己,但从来没有动机真的坐下来,所以有关它的事情.
既然你现在问过,我确实坐下来攻击jQuery UI的滑块,根据你的要求添加填充选项.
既然你现在问过,我确实坐下来攻击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);