2

我已经从jqueryUI修改了Slider UI，现在看起来像这样：http: //jsfiddle.net/eBukn/90/

.ui-slider-handle{
    -webkit-border-radius: 50%;
    color: #ecf0f1  !important;
    line-height: 40px  !important;
    top: -15px !important;
    width: 40px !important;
    height: 40px !important;
    background:#16a085 !important;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;  
    border: none !important;
    -webkit-transition:background .25s ease-in;  
   -moz-transition:background .25s ease-in;  
   -o-transition:background .25s ease-in;  
   transition:background .25s ease-in;  
    -webkit-backface-visibility: hidden !important;
    cursor: pointer!important;
}

.ui-slider-handle:hover{
    background:#2fe2bf !important;
}

.ui-slider-handle:active{
   background:#16a085 !important;
}

.ui-slider-handle:focus{
   outline: none !important;
}

.ui-slider-range {
    background:#1abc9c !important;
    border: none !important;
    -webkit-border-radius: 10px !important;
}

.ui-slider{
    -webkit-border-radius: 10px !important;
    border: none !important;
    background:#e8edf2 !important;
}

忘记css，我做了一个快速的自定义，也许它有一些错误......无论如何，我要做的是在每一步中添加黑点，这样用户就可以看到下一步的位置和它的数量。如下图所示。

这是一个模拟

最好的方法是什么？首先，我想用 jquery 放置元素并重复 n 次（取决于步数）。但也许可以用纯 CSS 来做。

你有什么想法或建议吗？

4

1 回答 1

3

这个可以吗？

http://jsfiddle.net/coma/V32MD/1/

CSS

.dots{
    width: 10px;
    height: 10px;
    background: black;
    border-radius: 5px;
    display: block;
    position: absolute;
    top: 2px;
}

JS

var foo = total - 1;
var mar = $( ".ui-slider" ).width() / foo;

for (var x = 0; x < foo; x++){

    $(".ui-slider" ).append("<span class='dots' style='left:"+ x * mar + "px'></span>");
}

您也可以使用百分比：http: //jsfiddle.net/coma/V32MD/2/

于 2013-04-28T17:28:27.777 回答