这个 jQuery UI 滑块扩展满足所有上层要求
我设法更改了默认的 jQuery UI 滑块以包含更多配置属性:
minRangeSize
- 设置最小范围大小,因此范围不能小于此设置
maxRangeSize
- 设置最大范围大小,因此范围不能大于此设置
autoShift
- 当设置为true
它时,当范围宽度达到最大时,它会自动拖动另一个手柄;当设置为false
处理时,不能移动超出最大范围宽度
lowMax
- 设置下手柄上边界,因此不可能将下手柄设置超过此值
topMin
- 设置上句柄下边界,因此不可能将上句柄设置为低于此值
这是这种范围滑块的一个工作示例。
这是必须在 jQuery 滑块之后运行的额外代码。它实际上重写了它的一个内部函数来检查新设置。此代码仅在加载滑块脚本时更改滑块代码(因此第一个 if 语句检查是否已加载滑块小部件):
(function ($) {
if ($.ui.slider)
{
// add minimum range length option
$.extend($.ui.slider.prototype.options, {
minRangeSize: 0,
maxRangeSize: 100,
autoShift: false,
lowMax: 100,
topMin: 0
});
$.extend($.ui.slider.prototype, {
_slide: function (event, index, newVal) {
var otherVal,
newValues,
allowed,
factor;
if (this.options.values && this.options.values.length)
{
otherVal = this.values(index ? 0 : 1);
factor = index === 0 ? 1 : -1;
if (this.options.values.length === 2 && this.options.range === true)
{
// lower bound max
if (index === 0 && newVal > this.options.lowMax)
{
newVal = this.options.lowMax;
}
// upper bound min
if (index === 1 && newVal < this.options.topMin)
{
newVal = this.options.topMin;
}
// minimum range requirements
if ((otherVal - newVal) * factor < this.options.minRangeSize)
{
newVal = otherVal - this.options.minRangeSize * factor;
}
// maximum range requirements
if ((otherVal - newVal) * factor > this.options.maxRangeSize)
{
if (this.options.autoShift === true)
{
otherVal = newVal + this.options.maxRangeSize * factor;
}
else
{
newVal = otherVal - this.options.maxRangeSize * factor;
}
}
}
if (newVal !== this.values(index))
{
newValues = this.values();
newValues[index] = newVal;
newValues[index ? 0 : 1] = otherVal;
// A slide can be canceled by returning false from the slide callback
allowed = this._trigger("slide", event, {
handle: this.handles[index],
value: newVal,
values: newValues
});
if (allowed !== false)
{
this.values(index, newVal, true);
this.values((index + 1) % 2, otherVal, true);
}
}
} else
{
if (newVal !== this.value())
{
// A slide can be canceled by returning false from the slide callback
allowed = this._trigger("slide", event, {
handle: this.handles[index],
value: newVal
});
if (allowed !== false)
{
this.value(newVal);
}
}
}
}
});
}
})(jQuery);