内容具有多个句柄和背景色的滑块 [英] Slider with Multiple Handle and Background Color for content
问题描述
我正在尝试使用可以有多个句柄的Jquery UI滑块:
I am trying to work with Jquery UI slider where I can have multiple handles:
$(function () {
var handlers = [25, 50, 75];
$("#slider").slider({
min: 0,
max: 100,
values: handlers,
slide: function (evt, ui) {
for (var i = 0, l = ui.values.length; i < l; i++) {
if (i !== l - 1 && ui.values[i] > ui.values[i + 1]) {
return false;
}
else if (i === 0 && ui.values[i] < ui.values[i - 1]) {
return false;
}
}
}
});
});
请注意,一个处理程序不能重叠,我将需要在加载时动态设置处理程序,并在更改时保存处理程序位置.
Please note that one handler can't overlap and I will need to set the handler dynamically on load, and save the handler positions on change.
我要完成的事情是将处理程序之间的ui内容着色为不同的颜色.我已经附上了一张图片.
The thing that i am trying to accomplish is to color the ui-content betweent the handler to different colors. I have attached the an Image.
如果可能的话,请提出建议.
Please advice if this is possible.
推荐答案
一种可能性是将滑块背景设置为CSS渐变,并在滑块值更改时在代码中更新渐变停止:
One possibility would be to set the slider background to a CSS gradient and to update the gradient stops in code when the slider values change:
$(function () {
// the code belows assume the colors array is exactly one element bigger
// than the handlers array.
var handlers = [25, 50, 75];
var colors = ["#ff0000", "#00ff00", "#0000ff", "#00ffff"];
updateColors(handlers);
$("#slider").slider({
min: 0,
max: 100,
values: handlers,
slide: function (evt, ui) {
updateColors(ui.values);
}
});
function updateColors(values) {
var colorstops = colors[0] + ", "; // start left with the first color
for (var i=0; i< values.length; i++) {
colorstops += colors[i] + " " + values[i] + "%,";
colorstops += colors[i+1] + " " + values[i] + "%,";
}
// end with the last color to the right
colorstops += colors[colors.length-1];
/* Safari 5.1, Chrome 10+ */
var css = '-webkit-linear-gradient(left,' + colorstops + ')';
$('#slider').css('background-image', css);
}
});
此代码适用于chrome和safari.我的猜测是,您只需要按照此处为-webkit-linear-gradient生成的方式生成多个梯度字符串(用于-moz-linear-gradient,-ms-linear-gradient等)即可.
This code works for chrome and safari. My guess is you just have to generate multiple gradient strings (for -moz-linear-gradient, -ms-linear-gradient, etc...) the way I did it for -webkit-linear-gradient here.
这篇关于内容具有多个句柄和背景色的滑块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!