slogin.info

ihc 468x60 1 1
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна0 / 5
 
Автор: Администратор
Просмотров: 5242
Теги: javascript, jQuery, slider, слайдер, ползунок

В этой статье мы расскажем о том, как создать простенький плагин на jQuery, который будет изменять внешний вид слайдера с ползунком, таким образом вы сможете задавать собственное оформление ему.

 Для начала в этой статье мы рассмотрим сам плагин, опишем задаваемые свойства, после чего приведем пример использования.

Чтобы написать плагин под jQuery необходимы определенные знания в этой сфере, если у вас их нету, то вам будет очень сложно разобраться.

Вот код плагина:

(function($){
	jQuery.fn.sliderInput = function(options){ // плагин ползунка за место input[type=text]
		options = $.extend({ // значения по-умолчанию
			'max' : 100, // максимальное значение
			'min' : 0 // минимальное
		}, options);
		
		var make = function(){
			var target = $(this);	// указатель на текущий input
			var wrap_slider = $(document.createElement( "div" )).addClass("wrap_slideri");	// прогресс бар ползунка
			var slider = $(document.createElement( "div" )).addClass("slider"); // сам ползунок
			var checkPressing = false;	// индикатор зажатия ползунка
			var checkNull = false;	// индикатор нулевого смещения
			var offset = 0;	// текущее смещение ползунка
			var current = 0; // текущее значение ползунка (значение в input)
			
			var min = options['min']; // получаем максимальное значение ползунка
			var max = options['max'] - min; // получаем максимальное значение ползунка
			
			wrap_slider = target.wrap( wrap_slider ).parent(); // обёртываем input и возвращаем ссылку на эту обёртку(прогресс бар)
			target.after( slider ); // добавляем в обёртку сам ползунок
			
			var width = wrap_slider.width() - slider.width() ; // получаем ширину прогресс бара в пикселях и вычитаем ширину ползунка
			
			wrap_slider.mousemove(function(eventObject){ // событие перемещения курсора по прогресс бар
				if (checkPressing && // проверяем зажат ли ползунок
					((offset-eventObject.offsetX) < 10) ) { // проверяем разницу смещения, чтобы не прыгал
					changeSlider(eventObject.offsetX); // изменяем положение ползунка и значение
				}
			});
			
			wrap_slider.mousedown(function(eventObject){
				if (!checkNull) { // проверяем нулевое или нет смещение
					changeSlider(eventObject.offsetX); // изменяем положение ползунка и значение
				}
				checkPressing = true; // ползунок зажат
				checkNull = false; // смещение не нулевое
			});
			
			wrap_slider.mouseup(function(eventObject){
				checkPressing = false; // ползунок разжат
			});
			
			wrap_slider.mouseleave(function(eventObject){
				checkPressing = false; // ползунок разжат
			});
			
			slider.mousedown(function(eventObject){
				checkNull = true; // смещение нулевое
			});
			
			function changeSlider(offsetX) {
				offset = offsetX;		// получаем смещение
				if (offset >=  width) { // если смещение больше размеров прогресс бара
					offset = width; // уравниваем смещение с максимальным значением
				}
				if (offset <= 0) { // если смещение меньше 0
					offset = 0; // уравниваем смещение с минимальным значением
				}
				current = max/width * offset + min; // находим текущее значение
				target.attr("value",Math.round(current)); // задаем значение input с округлением
				slider.css("left",offset + "px"); // смещаем ползунок
			}
		};
		
		return this.each(make); // применяем наш плагин ко всем элементам
	};
})(jQuery);

Скрипт действует по следующему принципу - берётся текстовое поле, оборачивается вокруг него блок (Имеет класс .wrap_slideri), который будет служить прогресс баром (по которому будет ездить ползунок), так же создается внутри него сам блок самого ползунка(Имеет класс .slider). Каждому из них задаются соответствующие классы. Само же поле скрывается из виду, чтобы не мешался(в стилях это прописывается для поля в обёртке слайдера).

При перемещении ползунка вычисляется значение которое соответствует текущему положению и заносится в качестве значения(value) в текстовое поле(input).

Сам же плагин поддерживает настройку максимального и минимального значения ползунка, за счёт этого можно задавать разные значения, например 50-150, 0-400 и т.д.

По-умолчанию минимальное значение - 0, а максимальное - 100.

Использование плагина

Для использования этого плагина вам необходимо подключить библиотеку jQuery, после которой подключить файл с самим плагином. Лучше всего плагин подключать перед закрывающим тегом </body>, иначе он может не срабатывать.

Файл плагина:

download

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

$('.randomClass').sliderInput();

Если вам необходимо задавать другие значения максимального и минимального значения, тогда используйте такую конструкцию:

$('.randomClass').sliderInput( {
		'max' : 300, // максимальное значение ползунка
		'min' : 200 // минимальное значение ползунка
	});

Пример использования плагина inputSlider

Задаем разметку нашей страницы:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>   
<link rel="stylesheet" href="/../css/template.css" type="text/css" />
<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
<title>Страница</title>
</head>
<body>
	<div class="wrap">
		<input type="text" class="slideri"/>
	</div>
	<div class="wrap second">
		<input type="text" class="slideri" />
	</div>
	<div class="active"></div>
<script type="text/javascript" src="/js/slide_input.js"></script>
<script type="text/javascript">
$('.slideri').sliderInput( {
		'max' : 200,
		'min' : 50
	}
);
</script>
</body>
</html>

Задаём стили для внешнего вида слайдеров и ползунков:

/* Общие стили */
body {
	margin:0;
}

p {
	list-style-type:0;
	font-size:14px;
}
/* Общие стили закончилась */

.wrap {
	margin: 40px 40px;
}

.wrap .wrap_slideri {
	width:300px;
	height:10px;
	background:#666666;
	position:relative;
	cursor:pointer;
}

.wrap .wrap_slideri .slider {
 	position:absolute;
	width:7px;
	height:30px;
	top:-10px;
	left:0;
	background:#000;
	cursor:pointer;
}

.wrap .wrap_slideri input {
	opacity: 0;
	position:absolute;
	z-index:-1000;
}

/* стили для второго ползунка */

.wrap.second .wrap_slideri {
	width:200px;
	height:10px;
	border-radius:8px;
	border:1px solid #aaa;
	background:none;
	position:relative;
	cursor:pointer;
}

.wrap.second .wrap_slideri .slider {
 	position:absolute;
	width:14px;
	height:20px;
	border-radius:10px;
	top:-5px;
	left:0;
	background:#000;
	cursor:pointer;
}

Результат вы можете посмотреть на демо-странице:

demo

Или скачать пример полностью:

download

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • ZOMRO
    7.80
  • intuit89
    6.20
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Как подключить на свой сайт jQuery

Для многих новичков в создании сайтов непонятно, что же такое JQuery, хоть они и постоянно слышат о нем и даже возможно пользовались.

Как мы знаем есть язык JavaScript, который позволяет работать динамически с элементами на странице и делать страницу более привлекательной.

Теги:

javascript, jQuery, google, jquery.min

Комментариев: 0 Подробнее
Ajax-форма обратной связи на JQuery

В этой статье мы расскажем о том, как сделать форму с ajax-запросом, при помощи библиотеки jQuery. Другими словами, чтобы страница не перезагружалась, при отправке данных через форму.

Теги:

javascript, form, jQuery, ajax, onclick

Комментариев: 0 Подробнее
Увеличение изображения при нажатии на него.

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

Теги:

javascript, img, jQuery

Комментариев: 0 Подробнее

Последнее с форума

ZOMRO аватар
А Вы знали, что на нашем сайте есть блог, где собраны статьи с интересной и, главное, полезной инфор...
Перейти в тему
ZOMRO аватар
Друзья, на нашем сайте доступен сервис, который предназначен для того, чтобы Вы могли проверить “вид...
Перейти в тему
ZOMRO аватар
Бесплатный тестовый период виртуального хостинга на 10 дней Мы гарантируем высокую стабильность и п...
Перейти в тему

Последние статьи

Javascript функции

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

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.