JQUERY带有等级值的滑块

我正在使用此jQuery UI的滑块。我希望像图像中的jquery-ui-slider等级...如何修改此脚本？JQUERY带有等级值的滑块

alt text

如何在这个脚本做到这一点？

<script src="../../Scripts/jquery.ui.core.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.ui.widget.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.ui.mouse.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.ui.slider.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("#slider").slider(); 
    }); 
</script>

来源

2010-12-21 Kajah User

AFAIK，没有办法通过jQuery以编程方式显示等级。您可能必须使用自定义HTML/CSS来做到这一点。 – 2010-12-21 08:09:48

如何设置它你能告诉我一些例子 – 2010-12-21 08:17:28

HTML：

<div id="wrap"> 
    <div id="slider"></div> 
    <div id="slider-text"> 
     <div id="0">Zero</div> 
     <div id="1">One</div> 
     <div id="2">Two</div> 
     <div id="3">Three</div> 
    </div> 
</div>

的JavaScript/JQuery的：

$("#slider").slider({ 
    value: 0, 
    min: 0, 
    max: 3, 
    step: 1 
}); 

$('#1').css('left','32.3333%'); 
$('#2').css('left','64.6666%'); 
$('#3').css('left','93.9999%');

CSS：

#slider-text div{ 
    float: left; 
    position: absolute; 
}

工作例如：http://jsfiddle.net/A8L8C/

可能您需要将DIV的左侧属性适应您的愿望文本（差，好，非常好，优秀）。快乐编码！

来源

2011-03-13 13:30:48

JQUERY带有等级值的滑块

回答

相关问题