Модуль UI Slider — шкала с бегунком

Модуль UI Slider позволяет создать шкалу с бегунком, который можно перемещать с помощью указателя мыши. Для загрузки модуля переходим на страницу http://jqueryui.com/download. Оставляем установленными флажки UI Core, Slider, 1.7.2, выбираем тему из списка (например, UI lightness), а затем щелкаем на кнопке Download. Распаковываем архив в отдельную папку. Из этого архива для работы модуля необходимы следующие файлы:

Все указанные файлы необходимо подключить к скрипту в том порядке, в котором они перечислены. В качестве примера выведем две шкалы с разными параметрами настройки (листинг 12.29).

Листинг 12.29. Модуль UI Slider, шкала с бегунком

<!doctype html>
<html>
<head>
<title>Модуль UI Slider, шкала с бегунком</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function() {
   $("#slider1").slider({
      range: true,
      values: [10, 65]
   });
   $("#slider2").slider({
      range: false,
      value: 50
   });
});
</script>
</head>
<body style="font-size:8pt; font-family:Verdana"><br><br>
<div style="width: 500px;">
<div id="slider1"></div><br><br>
<div id="slider2"></div>
</div><br><br>
</body>
</html>

Результат выполнения листинга показан на рис. 12.13.

pic12_13.png

Рис. 12.13. Различные варианты шкалы

Как видно из примера, шаблоном для шкалы является элемент DIV.

<div id="slider1"></div>

Для создания шкалы с бегунком и управления ею предназначен метод slider(). Формат метода:

slider([<Объект с опциями>])

Параметр <Объект с опциями> представляет собой объект, состоящий из пар "опция/значение". Могут быть указаны следующие опции.

Первый формат метода slider() позволяет задать значения при создании компонента. Чтобы изменить или получить значения опций уже после создания компонента, необходимо использовать второй формат метода slider(). Для этого в первом параметре указывается значение "option", во втором — название опции, а в третьем — новое значение.

$("#slider").slider("option", "value", 20);

Если необходимо получить значение опции, то третий параметр указывать не нужно. Получим местоположение всех бегунков на шкале.

var arr = $("#slider").slider("option", "values");

Второй формат метода slider() позволяет также управлять созданным компонентом. Для этого в первом параметре указываются следующие значения.

slider("value"[, <Значение>])
slider("values", <Индекс бегунка>, <Значение>)

Обработать события, происходящие с компонентом, можно двумя способами.

slider({
   <Событие>: <Функция обратного вызова>
});

или

bind(<Событие>, <Функция обратного вызова>)

В параметре <Событие> могут быть указаны следующие события (в скобках указано значение для метода bind()):

В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата.

function <Название функции>([<Объект event>[, <Объект UI>]]) {
   // ...
}

Через параметр <Объект UI> доступны два свойства:

Создадим несколько компонентов с различными настройками. Добавим возможность изменения значений из программы, а также обработаем события, происходящие с компонентами (листинг 12.30).

Листинг 12.30. Модуль UI Slider, опции, события и методы

<!doctype html>
<html>
<head>
<title>Модуль UI Slider, опции, события и методы</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function() {
   $("#slider1").slider({
      max: 200, // Максимальное значение шкалы
      min: 0, // Минимальное значение шкалы
      range: true, // Выделение участка между двумя бегунками
      values: [10, 65], // Местоположение бегунков
      orientation: "auto",
      step: 10, // Шаг
      animate: true // Плавное изменение положения бегунка
   });
   $("#slider2").slider({
      range: "min", // Выделение участка слева бегунка
      value: 40, // Начальное положение бегунка на шкале
      orientation: "horizontal", // Горизонтальное расположение шкалы
      change: function(e, ui) {
         alert("Установлено значение: " + ui.value);
      }
   });
   $("#slider3").slider({
      values: [25, 50, 75], // Начальное положение трех бегунков
      change: function(e, ui) {
         alert("Установлены значения: " + ui.values);
      }
   });
   $("#slider4").slider({
      range: "max", // Выделение участка выше бегунка
      value: 60, // Начальное положение бегунка на шкале
      orientation: "vertical", // Вертикальное расположение шкалы
      start: function() {
         $("#div1").append("Событие start<br>");
      },
      slide: function() {
         $("#div1").append("Событие slide<br>");
      },
      change: function() {
         $("#div1").append("Событие change<br>");
      },
      stop: function() {
         $("#div1").append("Событие stop<br>");
      }
   }).bind("slidestart", function() {
      $("#div1").html("Событие slidestart<br>");
   }).bind("slide", function() {
      $("#div1").append("Событие slide (bind)<br>");
   }).bind("slidechange", function() {
      $("#div1").append("Событие slidechange<br>");
   }).bind("slidestop", function() {
      $("#div1").append("Событие slidestop<br>");
   });
   $("#btn1").click(function() {
      var val = parseInt($("#txt1").val());
      if (!isNaN(val)) {
         // $("#slider2").slider("option", "value", val);
         $("#slider2").slider("value", val);
      }
      else alert("Необходимо ввести число");
   });
   $("#btn2").click(function() {
      alert($("#slider2").slider("option", "value"));
      // alert($("#slider2").slider("value"));
   });
   $("#btn3").click(function() {
      var val = parseInt($("#txt2").val());
      if (!isNaN(val)) {
         $("#slider3").slider("values", 1, val);
      }
      else alert("Необходимо ввести число");
   });
   $("#btn4").click(function() {
      var arr = $("#slider3").slider("option", "values");
      alert(arr[1]);
      // alert($("#slider3").slider("values", 1));
   });
});
</script>
</head>
<body style="font-size:8pt; font-family:Verdana"><br><br>
<div style="width: 600px;">
<div id="slider1"></div><br><br>
<div id="slider2"></div><br>
<input type="text" id="txt1">
<input type="button" value="Изменить положение бегунка" id="btn1">
<input type="button" value="Получить значение" id="btn2"><br><br><br>
<div id="slider3"></div><br>
<input type="text" id="txt2">
<input type="button" value="Изменить положение второго бегунка"
       id="btn3">
<input type="button" value="Получить значение" id="btn4"><br><br><br>
<div id="slider4"></div>
</div><br><br>
<div id="div1"></div>
</body>
</html>
Предыдущая статья Все статьи Следующая статья