jQuery UI – надстройка над JavaScript-библиотекой jQuery. Она поможет создавать по настоящему интерактивные веб-приложения. Сегодня мы познакомимся с виджетом Slider.

Виджет Slider может превратить обычный элемент div в шкалу с бегунком, который можно перемещать с помощью указателя мыши или клавишами.
Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Slider и видим, что вместе с ним отметился чекбокс UI Core. Работа виджета Slider зависит от него, поэтому он необходим.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив. Можно испытать пример как есть, но интереснее создать свою HTML-страничку, где сначала в разделе HEAD подключить несколько файлов, которые есть в архиве.

<link type="text/css" href="css/hot-sneaks/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

Мы подключили файл стилевого оформления виджета и файл библиотеки jQuery. В третьем файле объединена функциональность ядра UI и виджета Slider. Дальше познакомимся с требованиями к HTML-разметке.

Вы можете смеяться, но требований нет. Слайдер делается из обычного элемента div.

<div id="slider"></div>

Теперь привязываем функциональность виджета к HTML-разметке. Это тоже проще простого:

<script type="text/javascript">
$(function(){
  $("#slider").slider();
});
</script>

В таком виде виджет Slider использует все настройки по умолчанию, но настроить его под себя несложно. Попробуем передать виджету какие-нибудь настройки.

<script type="text/javascript">
$(function(){
  $("#slider").slider({
    min: 10,
    max: 200,
    values: [20,60]
  });
});
</script>

С помощью опций min и max мы определили минимальное и максимальное значения шкалы, а с помощью опции values, определили начальные значения сразу для двух бегунков, т.е. в таком виде шкала позволит выбирать не одно значение, а диапазон значений.

Очень просто. Главное, знать список опций и их возможности. Ниже как раз и приведен такой список:

animate – по умолчанию опция имеет значение false. В этом случае щелчок на шкале приведет к тому, что бегунок моментально переместится в указанное место. Если установить значение true – перемещение бегунка будет выполнено с анимацией.

max – максимальное значение шкалы. По умолчанию – 100.

min – минимальное значение шкалы. По умолчанию – 0.

orientation – определяет расположение виджета. Может принимать значения ‘horizontal’ и ‘vertical’. По умолчанию имеет значение ‘auto’. При значении по умолчанию обычно верно определяет нужную ориентацию. Если этого не происходит, можно указать ориентацию принудительно.

range – по умолчанию эта опция имеет значение false. Если установить значение true и при этом используется два бегунка, то между ними шкала будет отображаться иным стилем, нежели основная. Два других возможных значения ‘min’ и ‘max’ при одном бегунке. В первом случае иным стилем будет отображаться часть шкалы слева (или ниже) от бегунка, во втором случае – справа (или выше).

step – позволяет задать шаг изменения значений шкалы между минимальным и максимальным значением. Разность между максимальным и минимальным значением шкалы должна без остатка делиться на значение этой опции. Значение по умолчанию – 1.

value – определяет положение бегунка. При использовании более чем одного бегунка, определяет положение первого. Значение по умолчанию – 0.

values – массив, в котором могут быть переданы значения, определяющие положения бегунков на шкале. Если при этом опция range имеет значение true, длина массива должна быть равна 2. Значение по умолчанию – null.

Разобравшись с настройками виджета, перейдем к знакомству с теми событиями, на которые может реагировать слайдер. Как обычно – на простом примере:

<script type="text/javascript">
$(function(){
  $("#slider").slider({
    min: 10,
    max: 200,
    values: [20,60],
    stop: function(event, ui) {
      alert("Событие " + event.type);
    }
  });
});
</script>

В этом примере мы определили опцию stop. Значением опции является callback-функция, которая вызывается при окончании перемещения бегунка. Эта callback-функция может принимать два аргумента. Первый – объект event, второй аргумент – объект ui, в свойствах которого содержится некоторая информация, представляющая интерес:

ui.value – текущее значение опции value при использовании одного бегунка (при использовании двух и более бегунков – положение первого бегунка);
ui.values – текущее значение опции values при использовании двух и более бегунков;

А в следующем примере показано, каким образом можно получить доступ к свойствам объекта ui.

<script type="text/javascript">
$(function(){
  $("#slider").slider({
    min: 10,
    max: 200,
    values: [20,60],
    stop: function(event, ui) {
      alert("Положение бегунков: " + ui.values);
    }
  });
});
</script>

Далее приведены описания событий виджета Slider и названия опций, в которых можно определять callback-функции, вызываемые при наступлении соответствующих событий.

Опция start – событие slidestart происходит в момент начала перемещения бегунка.

Опция slide – событие slide происходит постоянно во все время перемещения бегунка.

Опция change – событие slidechange происходит при окончании перемещения бегунка или если положение бегунка было изменено программно.

Опция stop – событие slidestop происходит в момент окончания перемещения бегунка.

Нам осталось познакомиться с методами виджета Slider. В следующем примере продемонстрировано как с помощью метода option можно получить и установить значения опций уже после инициализации виджета. Для этого придется в HTML-код с которым мы эксперементируем, добавить пару кнопок:

<button id="getter">Get Option</button>
<button id="setter">Set Option</button>

и javascript-код:

<script type="text/javascript">
$(function(){
  $("#slider").slider({
    min: 10,
    max: 200,
    values: [20,60]
  });
  $("#getter").click(function(){
    alert("Положение: " +
              $("#slider").slider("option","values"));
  });
  $("#setter").click(function(){
    $("#slider").slider("values", 0, 15);
    $("#slider").slider("values", 1, 195);
  });
});
</script>

При инициализации виджета, мы использовали опции, с помощью которых ограничили диапазон значений от 10 до 200 и установили начальные значения двух ползунков. Для первого – 20, а для второго – 60. Затем мы связали с кнопками событие click. Если теперь щелкнуть по кнопке с надписью Get Option мы увидим окно предупреждения, в котором будет выведены значения, характеризующие текущие значения ползунков. При щелчке по кнопке с надписью Set Option для первого ползунка будет установлено значение 15, а для второго – 195. Если теперь щелкнуть по этой кнопке, то Ваших глазах ползунки изменят свое положение.

Ниже приведены описания всех доступных методов:

destroy – .slider(‘destroy’) полностью удаляет всю функциональность виджета Slider. Возвращает элементы в состояние, предшествующее инициализации.

disable – .slider(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее использование можно с помощью метода enable.

enable – .slider(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена с использованием метода disable.

option – .slider(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции виджета после инициализации.

value – .slider(‘value’, [value]) с помощью этого метода можно получить или установить значение бегунка (при использовании единственного бегунка).

values – .slider(‘values’, index, [value]) с помощью этого метода можно получить или установить значения бегунков (при использовании двух и более бегунков).

Ну и достаточно… Мы узнали почти все. За исключением приемов стилевого оформления виджета Slider. Но к этой теме я планирую обязательно вернуться.