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

ZHUR ARTUR.ru

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

Первый шаг к величию - это борьба со своей ленью. © Жизнь

»

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

  • 3

  • 4

Красивый ползунок выбора диапазона с помощью JQuery UI

Автор - Жур Артур | Добавлено - 2014-01-13 | Просмотров - 22584 | Скачено - 494

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

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

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


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

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


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

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

	$(document).ready(function(){
	              // Указываем class блока div где будет ползунок.
	     $( ".slider" ).slider({
	        animate: true, // Анимация ползунка
                range: "min", // Фон пути ползунка, если это свойство убрать, то синей линии не будет.
                value: 50, // Значение по умолчанию.
                min: 1, // Минимальная сумма.
                max: 100, // Максимальная сумма.
		step: 1, // Шаг диапазона.

		// Вывод диапазона
                slide: function( event, ui ) {
                    $( "#slider-result" ).html(ui.value);
                },

		// Вывод диапазона в поле input
                change: function(event, ui) {
                $('#text').attr('value', ui.value);
                }

	     });
      });

3CSS стили

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

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


Сами стили:


// Настройка блока с ползунком.
.slider {
width:230px;
height:11px;
background:url(slider-bg.png); // Фон ползунка.
position:relative;
margin:0 auto;
padding:0 10px;
}
// Сам ползунок
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:url(slider-button.png);
}
// Фон ползунка при перемещении.
.ui-widget-header {
background:url(fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}

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

Интересное

Комментарии