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帶有等級值的滑塊

回答

相關問題