在一个滑块中创建多个范围滑动手柄
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在一个滑块中创建多个范围滑动手柄相关的知识，希望对你有一定的参考价值。
我正在尝试向jQuery UI滑块小部件添加多个句柄，如在一个滑块中的2个或3个或更多范围滑块中。
我试过在谷歌搜索并找到一篇文章，展示如何修改它以具有多个句柄，但我需要它们作为范围滑块。
反正有没有让这项工作？
$("#slider-range").slider({
range: true,
min: 0,
max: 1439,
values: [540, 1020],
animate: true,
slide: slideTime
});
谢谢
看看colResizable jQuery插件。它允许您调整表列的大小，还可以创建多个范围滑块：
colResizable很好，所有，但如果你正在寻找更现代的东西，我写了Elessar来填补这个确切的利基。
这是一个扩展jquery-ui滑块功能的包装器，允许构建多范围滑块http://jsfiddle.net/ladrower/BmQq4/
它很容易使用。只需传递包含多范围滑块的DOM元素的选择器。
<html>
<div id="slider"></div>
</html>
<script>
var intervals = new Intervals("#slider");
</script>
请查看GitHub https://github.com/ladrower/jquery-ui-intervals上的文档和来源
我做了编辑。
你可以看看http://jsfiddle.net/q5WEe/1/
我编辑了70到82行。
/*edit
if ( o.values.length && o.values.length !== 2 ) {
o.values = [ o.values[0], o.values[0] ];
}*/
}
/*edit
this.range = $( "<div></div>" )
.appendTo( this.element )
.addClass( "ui-slider-range" +
// note: this isn't the most fittingly semantic framework class for this element,
// but worked best visually with a variety of themes
" ui-widget-header" +
( ( o.range === "min" || o.range === "max" ) ? " ui-slider-range-" + o.range : "" ) );*/
colresizable不适合我，因为它更倾向于表，我真的更喜欢使用jquery UI小部件，滑块。看起来源代码可以轻松处理多个句柄，它们实际上并没有真正构建“添加”或“删除”处理作为功能。所以我刚刚添加到jquery UI Slider的源代码中（有点吓人......我知道）但效果很好。
var slider = $.widget("ui.slider", $.ui.mouse, {
version: "1.11.4",
widgetEventPrefix: "slide",
//...
value: function(newValue) {
// ...
},
values: function(index, newValue) {
// ...
},
//new function to allow creation of handles
//you can add your own code to handle arguments or something for placing
//the new handle in a specific spot
addHandle: function() {
//adds a new handle
this.options.values.push(this._trimAlignValue((this._valueMax() - this._valueMin()) / 2));
this._refresh();
},
//new function to allow deleting handles
//currently just takes the last value off, but you can make it fancier
removeHandle: function() {
//only remove a handle if there are more than 1 handles
if (this.options.values.length > 1) {
this.options.values.pop();
this._refresh();
}
},
//...
}
然后，当你想调用这些函数时，就这样做了
//when your 'add handle' button is clicked
$("#btn-add").click(function(){
//call the add handle function you made within the slider widget
$( "#slider" ).slider("addHandle");
});
$("#btn-remove").click(function(){
$( "#slider" ).slider("removeHandle");
});
如果您不坚持jQuery UI，noUiSlider也具有此功能并且可高度自定义。它无法立即告诉你范围，但是你可以通过手柄，min和max计数来轻松获得它们，如下所示：
//get array of connect elements (ranges)
var connect = multirange.querySelectorAll('.noUi-connect');
multirange.noUiSlider.on('update', function () {
var valuesarr = multirange.noUiSlider.get(),
max = multirange.noUiSlider.options.range.max[0],
oldsum = multirange.noUiSlider.options.range.min[0];// = slider min, will be usually 0
for ( var i = 0; i < connect.length; i++ ) {
if(valuesarr[i]) $(connect[i]).text(valuesarr[i] - oldsum);
else $(connect[i]).text(max - oldsum);
oldsum=valuesarr[i];
}
});
以上是关于在一个滑块中创建多个范围滑动手柄的主要内容，如果未能解决你的问题，请参考以下文章