Необходимо применить на веб-странице виджет Slider.

Опубликовал: admin Tuesday, June 18, 2024 в категории jQuery, Подборка рецептов | Пока нет комментариев

Виджет Slider позволяет превратить обычный элемент div в шкалу с бегунком, который можно перемещать с помощью указателя мыши или клавишами. Внешний вид виджета Slider в одном из многочисленных вариантов оформления представлен на рис. 17.5.

Решение

Решение этой задачи приведено в листинге 17.5.1. Для оформления использована тема "hot-sneaks".

Рис. 17.5. Виджет Slider в одном из многочисленных вариантов оформления

Листинг 1 7 .5 .1 . Использование виджета Slider

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-5-1</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/hot-sneaks/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#slider").slider();
});
</script>
</head>
<body>
<button id="getter">Get Option</button>
<button id="setter">Set Option</button>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-17-5-1</title>

$(function(){

$("#slider").slider();

});

</script>

</head>

<body>

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

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

</body>

</html>

Обсуждение

В примере из листинга 17.5.1 мы подключили файл стилей css/hot-sneaks/jquery-ui1.8.9.custom.css одной из многочисленных тем оформления. Кроме этого мы подключили файл библиотеки — js/jquery-1.4.4.min.js и файл js/jquery-ui1.8.9.custom.min.js, в котором объединена функциональность ядра UI и виджета Slider. Обратите внимание на HTML-разметку — это всего-навсего один элемент

div. За связь виджета с HTML-разметкой отвечает фрагмент кода, приведенный в листинге 17.5.2.

Листинг 1 7 .5 .2 . Использование виджета Slider

[code language=”javascript”]

В листинге 17.5.2 приведен фрагмент кода, реализующий базовую функциональность виджета Slider. Иными словами, все возможные настройки, которые можно было бы передать этому виджету, при такой реализации имеют значения по умолчанию.

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

Листинг 1 7 .5 .3 . Использование виджета Slider

[code language=”javascript”]

Давайте разберем пример из листинга 17.5.3, в котором мы передали виджету некоторые настройки, отличные от настроек по умолчанию.

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

Описания всех доступных опций приведены в табл. 17.13.

Таблица 17.13. Опции виджета Slider

Опция	Описание
disabled	Значение по умолчанию — false. Если установить значение true, то при инициализации функциональность виджета Slider будет недоступна, однако ее можно включить впоследствии, например, при выполнении какого-либо условия

Таблица 17.13 (окончание)

Опция	Описание
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

От настройки виджета Slider с помощью доступных опций перейдем к изучению его возможностей по реагированию на различные события. Сделаем это на примере из листинга 17.5.4.

Листинг 1 7 .5 .4 . Использование виджета Slider

[code language=”javascript”]

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

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

❒ ui.values — текущее значение опции values для двух и более бегунков.

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

ui.handle — DOM-элемент, который представляет собой бегунок, находящийся в процессе перемещения.

Листинг 1 7 .5 .5 . Использование виджета Slider

[code language=”javascript”]

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

Таблица 17.14. События виджета Slider

Опция	Событие	Описание
create	slidecreate	Наступает в момент инициализации
start	slidestart	Происходит в момент начала перемещения бегунка
slide	slide	Происходит постоянно во все время перемещения бегунка
change	slidechange	Происходит при окончании перемещения бегунка или если положение бегунка было изменено программно
stop	slidestop	Наступает в момент окончания перемещения бегунка

Перейдем к рассмотрению методов виджета Slider (табл. 17.15).

Таблица 17.15. Методы виджета Slider

Метод	Описание
destroy .slider(‘destroy’)	Полностью удаляет всю функциональность виджета Slider. Возвращает элементы в состояние, предшествующее инициализации
disable .slider(‘disable’)	Временно запрещает использование всей функциональности виджета. Вновь разрешить ее можно с помощью метода enable
enable .slider(‘enable’)	Разрешает использование всей функциональности виджета, если ранее она была запрещена методом disable
option .slider(‘option’, optionName , [value])	Устанавливает значение любой опции виджета после инициализации
option .slider(‘option’, optionName)	С помощью этого метода можно получить значение любой опции виджета после инициализации
widget .slider (‘widget’)	Обеспечивает доступ к объекту, который представляет собой элемент с функциональностью Slider
value .slider(‘value’, [value])	С помощью этого метода можно получить или установить значение бегунка (при наличии единственного бегунка)
values .slider(‘values’, index, [value])	С помощью этого метода можно получить или установить значения бегунков (для двух и более бегунков)

В листинге 17.5.6 приведен пример того, как можно получить значение какой-либо опции и изменить это значение уже после инициализации виджета.

Листинг 1 7 .5 .6 . Использование виджета Slider

[code language=”javascript”]

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

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

Необходимо применить на веб-странице виджет Slider.

Решение

Обсуждение

Похожие посты:

Комментировать Cancel reply