Реклама

перейдите по ссылке и получите скидку

 

TZ WIKI движек

Время работы на складе с 9:00 до 18:00 по звонку (договоренности, доставка по Москве)

Время работы на складе с 19:00 до 22:30 ежедневно кроме воскресения

доставка по Москве на хацкерах доставка по России в регионы

Прайс лист

Шаблоны наклеек шаблон наклеек

спасибо, что посетили наш сайт добавить в избранные

тел. 8 (919) 961-04-91 спросить Максима

г. Москва  М. Авиамоторная 28 адрес проезда до склада                      
E-mail: z751@yandex.ru

Логин Skype: z751_yandex_ru пишите сообщения

Реклама сайта Социальная сеть Что делать, не ответили ? ......>>>

симантическое ядро

[  блоговая конструкция ]

[ интересное ]

[ НОВИНКА любые размеры самоклееящей бумаги А4 купить ]

перепост текстав RAR Ашманов

ФОРМА ОБРАТНОЙ СВЯЗИ}}}

 Спец АКЦИЯ скидки % ....>>>>

Призыв к совместному продвижнию товара .....> Служба содействию сбыта

Яндекс.Метрика
тИЦ и PR сайта z751.narod.ru

Etiketten * Labels * Этикетки

"WAESCH" www.waesch.de

wir machen intelligente Etiketten

Laser * Copy * Jnkjet

Для лазерных принтеров

Для копиров ксероксов

Для струйных принтеров

Производитель ВЭШ Этикетен, Роненберген страбе 11, 30989 Герден Германия

сделано в Германии

Визитка тел. 8(919)961-04-91 Москва М. Авиамоторная 28 E-mail: z751@ya.ru  Skype: z751_yandex_ru пишите сайт z751.narod2.ru
Распечатать страницу

jQuery UI Slider — ползунок выбора диапазона

Подготовил: Александр Головко
Дата публикации: 16.06.2011
 

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

выбор диапазона цен с помощью ползунков

Идея, надеюсь, понятна. Перетягиваем ползунки, значения полей input синхронно меняются. Попробуем это реализовать.

Задача

Отыскать кроссбраузерное решение на js для интерфейса выбора диапазона. Требования:

  • инпуты и ползунки связанны (изменение значения одних тут же отражается на других);
  • гибкость стилизации (все должно выглядеть по дизайну).

Решение

Будем использовать плагин jQuery UI Slider. Сам по себе он просто создает ползунок, но подружить его с инпутами не составит труда.

Традиционный демо-пример.

Проверено в:

  • IE 6-8
  • Firefox 4
  • Opera 11
  • Safari
  • Chrome

Итак, вначале давай представим, что инпутов нет, и посмотрим, как работает сам плагин.

Что качать?

Быстрый старт

Подключаем библиотеки:

HTML
1<script type="text/javascript" src="js/jquery-1.6.1.min.js" ></script>
2<script type="text/javascript" src="js/jquery.ui-slider.js"></script>

В CSS добавляем правила для стилизации ползунка. Подробнее об этом ниже.

В HTML создаем элемент, который плагин заменит на ползунок и присваиваем ему id:

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

Инициализируем ползунок скриптом:

Javascript
1<script type="text/javascript">
2jQuery("#slider").slider({
3    min: 0,
4    max: 1000,
5    values: [0,1000],
6    range: true
7});
8</script>

А теперь подробнее

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

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

Настройки

При инициализации плагина можно задать его параметры:

Название параметра Описание Тип данных Значение по-умолчанию
disabledОтключает (true) или включает (false) слайдер.booleanfalse
animateОпределяет, будет ли ползунок передвигаться в точку плавно, когда пользоваль щелкает на точку на полосе. Также может принимать значение string представляющая одну из трех скоростей на выбор ("slow", "normal", или "fast") или число миллисекунд, определяющее продолжительность анимации (например, 1000).boolean, string, intfalse
maxМаксимальное значение слайдера.Number100
minМинимальное значение слайдера.Number0
orientationОпределяет ориентацию шкалы: слева направо или снизу вверх. Возможные значения: "horizontal", "vertical".Stringhorizontal
rangeЕсли выставлено в true, на слайдере будет двуа ползунка и диапазон между ними, который можно стилизовать. Два других значения это "min" и "max". Значение "min" создает диапазон от минимума шкалы до ползунка. Значение "max" создает диапазон от ползунка до максимума шкалы.boolean, stringfalse
stepОпределяет шаг слайдера. Полный диапазон шкалы (max − min) должен равномерно делится на шаг.Number1
valueОпределяет значение слайдера, если есть только однин ползунок. Если имеется более одного ползунка, определяет значение первого ползунка.Number0
valuesЭта опция может использоваться для указания нескольких ползунков. Если range имеет значение true, значений "values" должно быть 2.Arraynull

События

События — это функции, которые будут выполняться в определенные моменты жизни ползунка. Задавать их можно при инициализации. Например:

Javascript
1jQuery("#slider").slider({
2    stop: function(event, ui) {
3        alert('Ползунок переехал на новую позицию!');
4    }
5});

Перечень событий:

createСобытие возникает в момент создания ползунка
startСобытие возникает в момент, когда пользователь начинает двигать ползунок.
slideСобытие происходит при каждом перемещения мыши во время прокрутки. Используйте ui.value (слайдеры с одним ползунком), чтобы получить текущее значение ползунка, $(..).slider("value", index), чтобы получить значение ползунка для слайдеров с несколькими ползунками.
changeСобытие происходит при остановке прокрутки или если величина изменяется программным способом (посредством метода value). Принимает аргументы event и ui. Используйте event.orginalEvent, чтобы определить, изменилось ли значение с помощью мыши, клавиатуры или программно. Используйте ui.value (слайдеры с одним ползунком), чтобы получить текущее значение ползунка, $(this).slider("values", index), чтобы получить значение ползунка для слайдеров с несколькими ползунками.
stopСобытие возникает в момент, когда пользователь закончил двигать ползунок.

Методы

Вызов этих функций позволяет повлиять на работу ползунка, налету изменив его параметры. Делается это с помощью конструкции .slider(), например вот так:

Javascript
1jQuery("#slider").slider("values",0, 100);

Перечень методов:

destroyУдаляет функционал ползунка, возвращая элемент к первоначальному состоянию.
disableОтключает слайдер.
enableВключает слайдер.
optionПолучает или устанавливает любую опцию слайдера. Если значение не указано, будет выступать в качестве получателя. Синтаксис: .slider("option", optionName , [value])
optionУстанавливает сразу несколько опций слайдера путем предоставления опций объекта. Синтаксис: .slider( "option", options )
widgetВозвращает элемент .ui-slider.
valueУстанавливает или возвращает значение слайдера. Для слайдеров с одним ползунком.
valuesУстанавливает или возвращает значение слайдера. Для слайдеров с несколькими ползунками или с диапазоном.

Настройка стилей

Вообще-то стилизация элементов jQuery UI (одним из которых является данный слайдер) происходит путем выбора понравившейся темы и загрузки с официального сайта готового CSS. Лично меня такой подход не устраивает совершенно. Поэтому я выбрал из ихнего (очень избыточного, если использовать только слайдер) CSS только нужный код, который здесь и привожу с комментариями.

CSS
01/* Ширина слайдера */
02#slider {
03    width: 200px;
04}
05/* Контейнер слайдера */
06.ui-slider {
07    position: relative;
08}
09/* Ползунок */
10.ui-slider .ui-slider-handle {
11    position: absolute;
12    z-index: 2;
13    width: 13px;   /* Задаем нужную ширину */
14    height: 13px;  /* и высоту */
15    background: url(../img/slider.png) no-repeat; /* картинка изображающая ползунок. Или можно залить цветом, задать бордюр и скругления */
16    cursor: pointer
17}
18.ui-slider .ui-slider-range {
19    position: absolute;
20    z-index: 1;
21    font-size: .7em;
22    display: block;
23    border: 0;
24    overflow: hidden;
25}
26/* горизонтальный слайдер (сама полоса по которой бегает ползунок) */
27.ui-slider-horizontal {
28     height: 3px; /* задаем высоту согласно дизайна */
29}
30/* позиционируем ползунки */
31.ui-slider-horizontal .ui-slider-handle {
32    top: -5px;
33    margin-left: -6px;
34}
35.ui-slider-horizontal .ui-slider-range {
36    top: 0;
37    height: 100%;
38}
39.ui-slider-horizontal .ui-slider-range-min {
40    left: 0;
41}
42.ui-slider-horizontal .ui-slider-range-max {
43    right: 0;
44}
45/* оформление полосы по которой ходит ползунок */
46.ui-widget-content {
47    border: 1px solid #D4D4D4;
48    background: #fff;
49}
50/* оформление активного участка (между двумя ползунками) */
51.ui-widget-header {
52    border: 1px solid #D4D4D4;
53    background: #f00;
54}
55/* скругление для полосы слайдера */
56.ui-corner-all {
57    -moz-border-radius: 4px;
58    -webkit-border-radius: 4px;
59    border-radius: 4px;
60}

Некотоые из этих правил можно объединить, так как плагин щедро награждает элементы множеством классов. Например, мой изначальный

HTML
1<div id="slider">

превращается в

HTML
1<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider">

Но я предпочел оставить стили в таком виде для большей универсальности. Думаю, тот, кому придется по этому шаблону стилизовать вертикальный ползунок, скажет мне спасибо.

Добавляем связанные инпуты

Теперь самое интересное. Добавим два инпута, в которых будем отображать значения, выбранные на слайдере.

HTML
1<input type="text" id="minCost" value="0"/>
2<input type="text" id="maxCost" value="1000"/>
3<div id="slider"></div>

При инициализации слайдера используем события stop и slide — первое обеспечит корректное значение в момент остановки ползунка, а второе придаст интерактивности (значение инпута будет меняться в реальном времени, синхронно движению ползунка).

Код обоих событий одинаков — берем текущее значение с помошью метода .slider("values",X) и помещаем в нужный инпут:

Javascript
01jQuery("#slider").slider({
02    min: 0,
03    max: 1000,
04    values: [0,1000],
05    range: true,
06    stop: function(event, ui) {
07        jQuery("input#minCost").val(jQuery("#slider").slider("values",0));
08        jQuery("input#maxCost").val(jQuery("#slider").slider("values",1));
09    },
10    slide: function(event, ui){
11        jQuery("input#minCost").val(jQuery("#slider").slider("values",0));
12        jQuery("input#maxCost").val(jQuery("#slider").slider("values",1));
13    }
14});

Осталось организовать обратную связь. Учим ползунок перемещаться, если пользователь вводит значение в инпут. Тут можно использовать событие keypress, чтобы ползунок реагировал на каждую нажатую клавишу или событие change, если хотим, чтобы изменение вступало в силу после завершения ввода и ухода из поля. Дело вкуса.

Заодно я вставил проверку выхода верхнего значения за пределы диапазона (у меня это 1000) и проверку, чтобы нижний ползунок не получил значение больше верхнего:

Javascript
01jQuery("input#minCost").change(function(){
02    var value1=jQuery("input#minCost").val();
03    var value2=jQuery("input#maxCost").val();
04 
05    if(parseInt(value1) > parseInt(value2)){
06        value1 = value2;
07        jQuery("input#minCost").val(value1);
08    }
09    jQuery("#slider").slider("values",0,value1);   
10});
11 
12     
13jQuery("input#maxCost").change(function(){
14    var value1=jQuery("input#minCost").val();
15    var value2=jQuery("input#maxCost").val();
16     
17    if (value2 > 1000) { value2 = 1000; jQuery("input#maxCost").val(1000)}
18 
19    if(parseInt(value1) > parseInt(value2)){
20        value2 = value1;
21        jQuery("input#maxCost").val(value2);
22    }
23    jQuery("#slider").slider("values",1,value2);
24});

Последняя деталь — нужно обеспечить чтобы пользователь не смог поломать плагин, введя в инпуты буквы или некорректрые числовые значения. Этот момент подробно не рассматриваю, так как он не касается непосредственно темы статьи. Любопытных отсылаю к демо-примеру, где это, конечно, реализовано.

В одной из следующих публикаций мы усложним задачу. Я покажу, как на основе этого решения можно сделать выбор значения с неравномерным шагом и разным масштабом. То есть когда требуется, чтобы, например, на первую половину слайдера приходился диапазон значений от 0 до 100, а на вторую от 100 до 1000.

Подобные варианты достаточно часто встречаются в интернет-магазинах — это удобно, ведь на маленьких суммах делализация более важна, а удобство пользователя, как известно, прежде всего.

Новости

18 мая 2011

Стикер новости

Поступила новая партия этикеток Apli в упаковках по 10 листов.

18 мая 2011

Экономная печать

Компания "Принтер помощь" предлогает выгодное сотрудничество по дозаправке картриджей при печати штрихкодо…

19 мая 2011

30% скидка

Для сокращения расходов на оклейку товаров мы предлогаем 30% скидку на некондиционный товар.

19 мая 2011

Web Сервисы

Мы помогаем размещать на ваших сайтах новые сервисы Пример1, Пример2, Пример3

27 декабря 2011

ЭТИКЕТКИ НА ЛИСТАХ А4

Этикетка на листах формата А4 получила широкое распространение около десяти лет назад, когда появились не…

27 декабря 2011

Самоклеящаяся этикетка

Не секрет что при реализации товара огромную роль играет этикетка, использование самоклеящейся этикетки&n…

27 декабря 2011

производстве самоклеящейся этикетки

При производстве самоклеящейся этикетки мы стараемся использовать такие материалы, которые характери…

27 декабря 2011

Этикетки

 Этикетки – одна из главных составляющих привлекательности продукта в глазах покупателя, которого вле…

27 декабря 2011

Новость 9

Самоклеящиеся этикетки: полипропиленовые, полиэтиленовые, бумажные. Маркировочные бирки.Мы поставляем разл…

© Принтер штрих код 345 160-03-76

тел. 8(919)961-04-91 г. Москва М. Авиамоторная 28 E-mail: z751@ya.ru  Skype: z751_yandex_ru пишите сайт z751.narod2.ru
Бесплатный хостинг uCoz