UniSite CMS - Современный движок для Ваших сайтов.

ZHUR ARTUR.ru

Персональный блог по созданию
мощных и современных Web-Проектов!

Человек, имеющий цель и план ее осуществления, всегда находит возможности для ее реализации. © Наполеон Хилл

»

Введите код полученный после подписки

  • 6

  • 0

Двухуровневый ползунок с помощью JQuery UI

Автор - Жур Артур | Добавлено - 2014-01-14 | Просмотров - 8056 | Скачено - 109

1Подключение плагинов

Первое, что нужно подключить это плагин JQuery, скачать его можно тут. Разместите его на ваш сайт и подключите к страницам перед закрывающим тегом </head> . Без этого плагина JQuery UI работать не будет!

Подключение плагина


Теперь нужно подключить специальный плагин для анимации ползунка называется он JQuery UI, скачать его можно тут.

Подключение плагина JQuery UI


2JQuery код для ползунка

Разместите этот код перед закрывающим тегом </head> или в отдельный JS файл.

	$(document).ready(function(){
// Указываем class блока div где будет ползунок.
$( ".slider" ).slider({
         animate: true, // Анимация. true - включить. false - выключить.
         min: 1, // Минимальный интервал диапазона.
         max: 100, // Максимальный интервал диапазона.
         range: true, // Включение двойного ползунка. Если место true поставить 'min', то будет один ползунок.
         step: 1, // Шаг ползунка.
         values: [15, 70], // Значения для ползунков. Для первого и второго.
         slide: function(event, ui) { // Действия которые будут происходить по перетаскивания ползунка.
         $( "#left_count" ).html(ui.values[ 0 ]); // Значение первого ползунка.
         $( "#right_count" ).html(ui.values[ 1 ]); // Значение второго ползунка.
         }
});
});

3CSS стили

Стили для ползунка находятся в файле jquery-ui-1.10.3.custom-levels.min.css его нужно также подключить к сайту.

Подключение стилей


Сами стили:

// Блок с ползунком.
.slider {
width:324px;
height:13px;
background:url(bg-x.png);
position:relative;
margin:0 auto;
}
// Сам ползунок.
.ui-slider-handle {
top:-6px; left:0px;
position: absolute;
width: 19px; height: 41px;
padding-right: 5px;
margin-left: -8px;
background: url(pol1.png) no-repeat;
}
// Фон ползунка при перемещении.
.ui-widget-header {
height: 9px;
top:2px; left: 2px;
position: relative;
background: url(bg-x.png) 0 -23px repeat-x;
.borderRadius(6px);
}

4HTML код ползунка.

от 15 до 70

// Блок с ползунком.

Всю документацию плагина JQuery UI и все его возможности вы можете найти на официальном сайте www.jqueryui.com/slider/

Интересное

Комментарии