Слайдер Jquery со значениями шкал - PullRequest
Новая
       7

Слайдер Jquery со значениями шкал

1 голос
/ 21 декабря 2010

Я использую этот jquery ui для слайдера. Здесь я хочу шкалы, как на изображении для jquery-ui-slider ... как изменить этот скрипт?

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>

1 Ответ

0 голосов
/ 13 марта 2011

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 к вашему желанию (плохо, хорошо, очень хорошо, отлично) Удачной кодировки!

...