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

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

  • jquery-ui-1.7.2.custom.css и каталог images (папка css\ui-lightness);
  • jquery-1.3.2.min.js (папка js);
  • jquery-ui-1.7.2.custom.min.js (папка js).

Все указанные файлы необходимо подключить к скрипту в том порядке, в котором они перечислены. В качестве примера выведем две шкалы с разными параметрами настройки (листинг 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([<Объект с опциями>])

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

  • value — определяет положение бегунка на шкале. Если используется несколько бегунков, то опция задает значение только для первого. Значение по умолчанию — 0.
  • values — позволяет задать положение нескольких бегунков. В качестве значения указывается массив. Если опция range имеет значение true, то массив должен состоять из двух элементов. Значение по умолчанию — null.
  • min — минимальное значение шкалы. Значение по умолчанию — 0.
  • max — максимальное значение шкалы. Значение по умолчанию — 100.
  • range — позволяет указать область, которая будет выделена на шкале. Может принимать следующие значения:
  • false — без выделения (значение по умолчанию);
  • true — при использовании двух бегунков выделяется область между ними;
  • min — выделяется область слева от бегунка при горизонтальной ориентации и ниже при вертикальной;
  • max — выделяется область справа от бегунка при горизонтальной ориентации и выше при вертикальной.
  • orientation — определяет расположение шкалы. Может принимать следующие значения:
  • horizontal — по горизонтали;
  • vertical — по вертикали;
  • auto — автоматическое определение ориентации (значение по умолчанию).
  • step — позволяет задать шаг изменения значений шкалы. Значение по умолчанию — 1.
  • animate — если указано значение true, то при щелчке на шкале бегунок будет перемещаться с анимацией. Значение по умолчанию — false (при щелчке на шкале бегунок перемещается моментально).

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

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

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

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

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

  • value — позволяет получить или установить значение бегунка (если используется один бегунок). Формат метода:
slider("value"[, <Значение>])
  • values — позволяет получить или установить значения при использовании нескольких бегунков. Формат метода:
slider("values", <Индекс бегунка>, <Значение>)
  • disable — временно запрещает использование компонента.
  • enable — разрешает использование компонента, если ранее оно было запрещено с помощью метода disable.
  • destroy — удаляет компонент и возвращает все элементы в первоначальное состояние.

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

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

или

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

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

  • start (slidestart) — в начале перемещения бегунка;
  • slide (slide) — возникает постоянно при перемещении бегунка;
  • stop (slidestop) — в конце перемещения бегунка;
  • change (slidechange) — возникает в конце перемещения бегунка, а также при изменении значения из программы с помощью методов value или values.

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

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

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

  • value — положение бегунка; если используется несколько бегунков, то свойство возвращает значение только для первого;
  • values — значения всех бегунков через запятую (при использовании нескольких бегунков).

Создадим несколько компонентов с различными настройками. Добавим возможность изменения значений из программы, а также обработаем события, происходящие с компонентами (листинг 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>

Библиотека jQuery UI
Библиотека jQuery UI

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов