Содержание
- Материал из JQuery
- Please complete the security check to access codepen.io
- Why do I have to complete a CAPTCHA?
- What can I do to prevent this in the future?
- Смотрите также:
- Добавить комментарий:
- Комментарии:
Материал из JQuery
Плагин Slider позволяет превращать блочные элементы (обычно div’ы) в элементы управления, которые обычно называют ползунками. Передвигать рукоятки ползунков можно с помощью мыши, а если ползунок находится в фокусе, то и с помощь клавиш со стрелками.
Обработчики событий, происходящие на ползунках, будут получать 2 параметра: стандартный объект события и дополнительный объект (назовем его ui) со следующими полями:
ui.value — текущее значение ползунка. ui.handle — DOM-элемент выполняющий роль рукоятки ползунка. Этот элемент создается автоматически, при инициализации плагина (при создании, этому элементу присваивается класс ‘ui-slider-handle’).
В ползунке может быть любое количество рукояток. Если их больше одной, то вместо поля value нужно использовать values, который будет хранить массив значений (по одному на каждую рукоятку).
Please complete the security check to access codepen.io
Why do I have to complete a CAPTCHA?
Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.
What can I do to prevent this in the future?
If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.
If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.
Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.
Cloudflare Ray ID: 538c8a9d9b22bf28 • Your IP : 78.85.5.224 • Performance & security by Cloudflare
Настройка, события, методы, вывод данных и классы ползунка диапазонов jQuery UI Slider
Плагин jQuery UI Slider делает выбранные элементы ползунками. Существуют различные варианты, такие как несколько рукояток, которые можно перемещать с помощью мыши или клавишами стрелок, и диапазонов.
1. Установка
- подключаем библиотеку jQuery версии 1.7+
- подключаем библиотеку jQuery UI с виджетом Sl >
В итоге получим это:
2. Настройки animate
Определяет, будет ли ползунок передвигаться плавно при клике на ползунке.
true или false, «fast» (быстро) или «slow» (медленно), или число в миллисекундах
По умолчанию: — false
classes
Добавляет дополнительные классы к классам слайдера. Может использоваться, если для разных ползунков используются разные стили.
Подробнее об использовании классов на сайте learn.jquery.com
disabled
Отключает true или включает false слайдер.
По умолчанию: — false
Максимальное значение ползунка.
По умолчанию: — 100
Минимальное значение ползунка.
По умолчанию: — 0
orientation
Горизонтальная «horizontal» или вертикальная «vertical» ориентация слайдера
По умолчанию: — «horizontal»
range
Определяет диапазон ползунка
Значение true включит второй ползунок и диапазон между ними, «min» — диапазон от минимума шкалы до ползунка, «max» — диапазон от ползунка до максимума шкалы
По умолчанию: — false
Шаг значений ползунка, который должен быть кратным разнице между максимальным и минимальным значением шкалы.
По умолчанию: — 1
value
Начальное значение ползунка, если он один
По умолчанию: — 0
values
Начальные значения ползунков, если их два, например [ 10, 20 ]
По умолчанию: — null
3. Методы
Вызов этих функций позволяет быстро влиять на работу ползунка и получать с него данные
$( «.selector» ).slider( «destroy» );
Полностью удаляет функциональность ползунка, что вернет элемент обратно в исходное состояние.
$( «.selector» ).slider( «disable» ); $( «.selector» ).slider( «enable» );
Возобновляет работу ползунка.
$( «.selector» ).slider( «option», < настройки >);
Устанавливает одну или несколько настроек
var option = $( «.selector» ).slider(«option», «min»);
Получает значение настройки
var option = $( «.selector» ).data().uiSlider.options;
Получает значения всех настроек, например: option.min, option.max и т.д.
$( «.selector» ).slider( «value», 20 );
Устанавливает нужное значение для рукоятки
var selection = $( «.selector» ).slider( «value» );
Получает значение рукоятки
$( «.selector» ).slider( «values», [ 55, 105 ] );
Устанавливает нужные значение для рукояток
$( «.selector» ).slider( «values», 0, 105 ] );
Устанавливает нужное значение для рукоятки 0
var values = $( «.selector» ).slider( «values» );
Получает значения рукояток
4. События change ( event, ui )
Событие, которое происходит при изменении значения ползунка
create ( event, ui )
Событие, которое запускается при создании ползунка
slide ( event, ui )
Событие, которое происходит на каждое движении мыши, при перетаскивании рукоятки ползунка. ui.value представляет текущее значение ползунка.
start ( event, ui )
Событие, которое происходит, когда пользователь начинает перетаскивать рукоятку ползунка
stop ( event, ui )
Событие, которое происходит, когда пользователь заканчивает перетаскивать рукоятку ползунка
Подробнее о настройках, методах и событиях jQuery UI Slider на сайте api.jqueryui.com
5. Вывод значений ползунка
Данный слайдер не имеет смысла, если пользователь не будет видеть данные, которые он им вводит. Для этого выведем на экран эти значения:
Для слайдера из 2-х рукояток:
6. Добавление значений к форме
Очень часто бывает, что данные такого слайдера нужно передать в форму, а не просто показывать на экране. Все делается аналогично выводу на экран, только данные подставляются в скрытое поле input
7. Оформление
Чтобы придать ползунку другой вид, нужно добавить свой стиль ниже оригинального jquery-ui.css (как в примере) или редактировать оригинальный
Другие способы оформления можно поглядеть в отдельной статье: Варианты оформления jQuery UI Slider
8. Описание классов
Ниже представлена таблица с классами слайдера и за что отвечает каждый из них
- Опубликовано: 02.05.2018 / Обновлено: 14.03.2019
- Рубрики: Слайдеры и карусели, Формы
- Метки: jQuery, jQuery UI
- 14956 просмотров
Смотрите также:
Слайдер для radio кнопок
jQuery плагин radios-to-slider для создания слайдера из radio кнопок
Горизонтальный таймлайн
Горизонтальный слайдер шкалы времени на jQuery
Наклонная галерея
Небольшой скрипт на jQuery с наклонной каруселью фотографий
Добавить комментарий:
Комментарии:
Статья весьма крутая! Мне нужна подсказка, как сделать один ползунок при передвижении которого меняется два разных значения?
Если я правильно понял, то второе значение должно по формуле ставится?
Источник: