4

我想实现这样的目标:

jquery-滑块

从 X 元素中,我想选择“OK”的数量、“部分OK”的数量和“不OK”的数量。显然,这三个范围不可叠加,并且总和始终为 X。

我尝试从标准的 jQuery UI 滑块开始,但主背景是独一无二的,因此我不能同时拥有绿色和红色。

是否有任何插件已经这样做了?或者知道使用标准 jQuery 插件最简单的方法是什么?

4

1 回答 1

7

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

于 2013-10-02T16:59:57.060 回答