Создание ползунка настроек на Javascript для сенсорных экранов
- Подробности
- Категория: Разработка
- Опубликовано 23.09.2014 16:13
При построении приложений очень часто требуется плавный регулятор настройки, который именуется чаще всего либо ползунком либо слайдером. В этом материале мы рассмотрим создание такого слайдера для сенсорных экранов на Javascript. Если вы задумаете создать своё приложении на базе технологии HTML - вам данный скрипт понадобиться.
Итак, логика всего скрипта очень проста. Мы ставим слушатель касаний на наш подвижный элемент в слайдере и затем обрабатываем движение пальцем попутно обсчитывая пользовательские данные.
Передвижение осуществляется за счёт использования свойства object.style.left, оно самым оптимальным образом способно выполнять такого рода перемещения HTML объектов по странице.
Вот собственно код примера такого ползунка:
<div id="count"></div>
<div id="line">
<div id="rele"></div>
</div>
<style>
#line {
border-radius: 5px;
background: #E0E0E0;
width: 300px;
height: 5px;
margin: 0px;
margin-top: 50px;
}
#rele {
width: 30px;
height: 30px;
border-radius: 30px/30px;
float:left;
position: relative;
left: 0px;
top: -14px;
background: rgb(109,109,109);margin-left:0px;
color:white;
/*transition:0.3s left;*/
}
</style>
<script>
var currentPos=55;
var minCount=50;
var Count=10;
var rele=document.getElementById('rele');
var line=document.getElementById('line');
var rightEdge = line.offsetWidth - rele.offsetWidth;
rele.style.left=((currentPos-minCount)*rightEdge)/Count+"px";
document.getElementById('count').innerHTML=currentPos;
rele.ontouchstart = function(e) {
var shiftX = e.targetTouches[0].pageX - rele.offsetLeft;
document.ontouchmove = function(e) {
var newLeft = e.targetTouches[0].pageX - shiftX - line.offsetLeft;
if (newLeft < 0) {newLeft = 0;}
if (newLeft > rightEdge) {
newLeft = rightEdge;
}
/*Отобразим значения*/
document.getElementById('count').innerHTML=Math.round((newLeft/rightEdge)*Count)+minCount;
rele.style.left = newLeft + 'px';
}
document.ontouchend = function() {
document.ontouchmove = document.ontouchend = null;
};
return false;
};
</script>
Как видите сам скрипт примера небольшой. Итак, мы объявили несколько переменных, которые вам предстоит изменить под собственную задачу. Итак, minCount содержит самое начальное число вашей настройки, то которое будет фактически в крайнем левом положении ползунка. В свою очередь Count содержит в себе информацию о том, сколько всего возможных делений будет распределено по всей длинне слайдера. Грубо говоря, Count+minCount будет равнятся числу в крайнем правом положении ползунка. И конечно текущая позиция ползунка содержится в переменной currentPos.
Данная статья приведена в качестве примера, а не иллюстрирует эталонно правильное использования событий касаний. Рекомендуем почитать о касаниях в этой статье.
Надеемся материал оказался полезным в создании вашего проекта. Если есть вопросы или предложения по улучшению - пишите в комментарии.