我想实现这样的目标:
从 X 元素中,我想选择“OK”的数量、“部分OK”的数量和“不OK”的数量。显然,这三个范围不可叠加,并且总和始终为 X。
我尝试从标准的 jQuery UI 滑块开始,但主背景是独一无二的,因此我不能同时拥有绿色和红色。
是否有任何插件已经这样做了?或者知道使用标准 jQuery 插件最简单的方法是什么?
我想实现这样的目标:
从 X 元素中,我想选择“OK”的数量、“部分OK”的数量和“不OK”的数量。显然,这三个范围不可叠加,并且总和始终为 X。
我尝试从标准的 jQuery UI 滑块开始,但主背景是独一无二的,因此我不能同时拥有绿色和红色。
是否有任何插件已经这样做了?或者知道使用标准 jQuery 插件最简单的方法是什么?
jQuery UI 滑块为您提供了它的值,正如您在演示中看到的那样:
$( "#slider-range" ).slider({
slide: function( event, ui ) {
/* here, you can play with it */
}
});
我将滑块的背景颜色设置为绿色,中间部分的背景颜色设置为黄色,并div
在滑块的右侧添加一个动态调整宽度的定位,以便它从右到左分层
$( "#slider-range" ).slider({
slide: function( event, ui ) {
$('#YourDiv').css('width', ui.values[1]); /* obviously, you have to multiply the value of the slider by something to fit your design */
}
});
在 jQuery UI 演示中,div 的样式如下:
#YourDiv {
float: right;
height: 100%;
background: red;
width: 50px; /* this would be dynamic */
border-radius: 0 4px 4px 0;
}
我做了一个小 Fiddle DEMO