Виджет slider создает функциональность ползунка:
<div id="slider"></div> <script type="text/javascript"> $(function(){ $('#slider').slider(); }); </script>
Используя классы, создаваемые виджетом, можно настроить его стилизацию. При применении виджета к элементу добавляется класс
ui-slider
. Настроим стилизацию этого класса:
<html> <head> <link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.min.css"></style> <script src="jquery-2.0.2.min.js"></script> <script src="jquery-ui-1.10.3.custom.min.js"></script> <style> .ui-slider { background: #FF9999; margin: 10%; width: 200px; } </style> </head> <body> <div id="slider"></div> <script type="text/javascript"> $(function(){ $('#slider').slider(); }); </script> </body> </html>
Используя следующие свойства слайдера, можно выполнить более точную его настройку:
aimate
: устанавливает скорость анимации. Мы можем передать в качестве значения названия скоростей, например, "fast" (быстрая анимация) и
"slow" (медленная анимация).($('#slider').slider({ animate: 'slow' })
)
Также можно задать числовое значение, указывающее продолжительность анимации в миллисекундах ($('#slider').slider({ animate: 900 })
)
disabled
: при установке значения true
делает слайдер недоступным
max
: максимальное значение слайдера, по умолчанию равно 100
min
: минимальное значение слайдера, по умолчанию равно 0
orientation
: ориентация слайдера, может быть горизонтальной (значение по умолчанию - "horizontal"), так и
вертикальной ("vertical"). Например: $('#slider').slider({orientation:'vertical'})
range
: указывает, будет ли стилизоваться та часть ползунка, которая была пройдена бегунком
Может принимать булевое значение. Если имеет значение true
, то прошедшая часть слайдера стилизуется. По умолчанию
имеет значение false
, поэтому никакой стилизации не происходит.
Также может иметь строковые значения min
и max
. Если равно min
, то стилизация, то есть окрашивание
будет производиться сначала отсчетов слайдера, если max
- то с конца: $('#slider').slider({range: 'max' })
step
: шаг приращения бегунка слайдера, по умолчанию равен 1
value
: определяет значение бегунка слайдера
values
: с помощью этого свойства мы можем задать у слайдера сразу несколько бегунков: $('#slider').slider({values: [ 10, 25, 50]})
Слайдер обладает следующими методами:
slider("disable"): делает слайдер недоступным: $("#slider").slider("disable");
slider("enable"): делает слайдер доступным для взаимодействия
slider("destroy"): удаляет функциональность виджета slider у элемента
slider("widget"): возвращает объект jQuery, представляющий виджет (var widget = $("#slider").slider("widget");
)
slider("option"): позволяет получить или установить значения свойств слайдера. Например, установим и получим значение свойства value:
$('#slider').slider(); // установка $('#slider').slider('option', 'value', 30); // получение значения var val=$('#slider').slider('option', 'value'); console.log(val);
slider("value"): возвращает или устанавливает значение свойства value
. Например, получим значение
$('#slider').slider('value');
. А передавая в качестве второго параметра числовое значение, мы можем установить значение бегунка: $('#slider').slider('value', 44);
Поскольку у слайдера может быть несколько бегунков, то у метода slider('value')
есть двойник, помогающий
получить или установить сразу несколько значений - для каждого бегунка. Например, получим все значения:
// создание виджета $('#slider').slider({values: [10,80]}); // установка значений $('#slider').slider('values', [30,60]); // получение значений var vals=$('#slider').slider('values'); console.log(vals);
Слайдер обладает несколькими событиями, которые помогают отслеживать его изменения:
change(event, ui)
: событие возникает, когда пользователь двигает бегунок слайдера, а также когда значение свойства
value
изменяется программным способом
create(event, ui)
: возникает при создании виджета
slide(event, ui)
: возникает при перемещении мыши вдоль полосы слайдера
start(event, ui)
: событие возникает, когда пользователь начинает перемещать бегунок слайдера
stop(event, ui)
: событие возникает, когда пользователь завершает перемещать бегунок слайдера
Теперь применим события слайдера:
<h3>Слайдер</h3> <div id="slider"></div> <br /> Текущее значение слайдера: <span id="sliderValue"></span> <script type="text/javascript"> $(function(){ $('#slider').slider({ change: function (event, ui){ var val = $('#slider').slider('value'); $('#sliderValue').html(val); }, start: function(event, ui){ console.log('Начало движения слайдера'); }, slide: function(event, ui){ console.log('Перемещение слайдера'); }, stop: function(event, ui){ console.log('Завершение движения слайдера'); } }); }); </script>