Понедельник, 08 Октября 2012 13:51

Аналог input type="range" на JavaScript

Written by 
Оцени эту запись
(6 Голоса)

В HTML есть тег input с атрибутом type="range". Изначально этот элемент разрабатывался для слайдеров, но он 

 

полезен и в другом функционале. Этот элемент допускает частичную стилизация. Я уже писала о стилизации <input 

 

type="range"> для WebKit браузером. Об этом можно почитать здесь - http://kate-land.net/html-css/item/158-input-range-styling. А в этой статье я расскажу не о стилизации стандартного элемента, а о создании его аналога на JavaScript.

 
 
 
 

Демо

 
 
HTML-разметка очень проста - нам нужен контейнер и внутренний элемент, который и будет двигаться при движении 
 
мышки.
 
 
<div class="range" id="range">
<span style="left: 0px;" id="inner"></span>
</div>
 
 
Поскольку мы используем обычные теги div и span, то можно их стилизировать каким угодно образом. Главное 
 
требование - это позиционирование этих элементов. У контейнера должно быть свойство position: relative, а в 
 
внутреннего span'а - position: absolute. Для простоты поставим ему еще top: 0 и left: 0. Ну и не забудьте сделать 
 
span блочным, иначе не сможете задать ему размеры.
 
 
В <head> документа прописываем свой JavaScript, а на <body> вешаем его выполнение
 
 
<body onLoad="Range();"></body>
 
 
Остановимся подробно на самой скрипте.
 
 
<script type="text/javascript">
function Range(){
 
var range, inner, start, stop, move, is_move, no_move, left;
range = document.getElementById('range');
inner = document.getElementById('inner');
left = parseInt(inner.style.left, 10);
is_move = -1;
range.addEventListener('mousedown', function(e){
if(Math.abs(left+250-e.pageX)<12){is_move = 1; start = e.pageX;} else {is_move = -1}
});
 
range.addEventListener('mouseup', function(e){
if(is_move == 1){
is_move = -1;
stop = e.pageX-start;
}
});
 
range.addEventListener('mousemove', function(e){
if(is_move == 1) {
move = e.pageX - start;
if(move>0) {
if(left<200-10){left++}
} else {
if(left>0){left--}
}
inner.style.left = left+'px';
}
});
 
range.addEventListener('mouseout', function(e){
is_move = -1;
});
 
}
</script>
 
 
Для начала определяем необходимые переменные - контейнер, внутренний элемент и отступ внутреннего элемента от левого края контейнера.
 
 
range = document.getElementById('range');
inner = document.getElementById('inner');
left = parseInt(inner.style.left, 10);
 
 
 
Введем дополнительную переменную is_move. Ее значение будет равно 1, если движение доступно (мышка нажата в нужном месте), а -1, если не доступно - пользователь отпустил мышку или увел далеко.
 
Для начала задаем is_move = -1.
 
 
Далее на контейнер вешаем события мыши.
 
mousedown - если курсор мыши на достаточно малом расстоянии от внутреннего элемента нашинаем движение.
 
 
range.addEventListener('mousedown', function(e){
if(Math.abs(left+250-e.pageX)<12){is_move = 1; start = e.pageX;} else {is_move = -1}
});
 
 
Если произошло событие mouseup (отпущена кнопка мыши), то движение должно прекратиться.
 
 
range.addEventListener('mouseup', function(e){
if(is_move == 1){
is_move = -1;
stop = e.pageX-start;
}
});
 
 
Аналогично с mouseout:
 
 
range.addEventListener('mouseout', function(e){
is_move = -1;
});
 
 
Самое интересное происходит, когда мышка перемещается в нажатой кнопкой. Здесь и реализовано само перемещание внутреннего элемента. Start - это значение координаты курсора, когда кнопка мыши была нажата. Значение координаты курсора в момент движения определено в e.PageX. Если мышь двигается влево, то и span двигается влево, пока не достигнет конца внешнего элемента. Перемещание реализовано при помощи свойства left. Именно его мы меняем на 1 пиксель на увеличение или уменьшение, в зависимости от направления движения.
 
 
range.addEventListener('mousemove', function(e){
if(is_move == 1) {
move = e.pageX - start;
if(move>0) {
if(left<200-10){left++}
} else {
if(left>0){left--}
}
inner.style.left = left+'px';
}
});
 
 
 

Комментарии  

 
0 #2 kat-khmara 31.07.2013 12:51
Всегда пожалуйста!
 
 
0 #1 Vadim 31.07.2013 12:38
Спасибо, как раз сейчас пытаюсь сделать ползунок на JS
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов