Рассмотрен пример реализации элемента пользовательского интерфейса «Slider». Реализация будет проходить на прототипно-ориентированном языке программирования JavaScript. Перед нами стояла задача разместить на странице произвольное количество slider`ов и контролировать их состояние (получать или задавать определенные значения). Также нужна была возможность изменять внешний вид элементов ползунка(самой шкалы и рукояти). Отличительной важностью обладало соблюдение кроссбраузерности.

Кроссбраузерность – свойство сайта отображаться и работать во всех современных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и возможность отображать материал с одинаковой степенью читабельности. Понятие «кроссбраузерность» часто путают с пиксельным соответствием, что на самом деле является разными понятиями. Так как веб-технологии все время развиваются, приемлемую кроссбраузерность можно обеспечить только для последних версий современных браузеров [7].

От себя хочется добавить, что предпочтительнее всего писать плагин изначально для Internet Explorera, в связи с тем, что большая часть пользователей пользуется именно данным браузером. И лишь после, когда плагин корректно отображается в IE, подгонять его под остальные современные популярные браузеры, например Opera, Mozila Firefox, Google Chrome, US Browser, Safari и другие. Это мера предпринимается для уменьшения количества случаев невозможности отображения и использования скрипта пользователям [3].

Так как стандартный ползунок, реализуемый на html, отличается относительной простотой и не отвечает нужным требованиям, поставленным перед нами, было решено создавать slider на JavaScript [4].

Материалы и методы исследования

Перед тем, как приступить к реализации самого скрипта, нужно подготовить css классы ползунка:

.slider {

background-image: url(gifka.gif);

background-repeat: repeat-x;

}

.knob {

position: relative;

background-image: url(gifka2.gif);

}

Этим самым мы определяем фоны и позицию кнопки на самом ползунке. Установив нужные значения, мы определили фоновую картинку и повторение ее только по горизонтали. Располагаться кнопка на slider`е будет относительно исходного места. Далее в теле нашего html документа нужно определить блочные элементы для размещения slider`ов:

<div id=»sl»></div>

<div id=»sl2»></div>

Результаты исследования и их обсуждения

Чтобы не описывать каждый раз наш стиль внутри тега, выделяем стиль во внешнюю таблицу стилей, а к тегу при этом добавляем атрибут id с именем селектора. И теперь к самому интересному – наш JavaScript класс slider`а:

function slider(elemId, sliderWidth, range1, range2, step) {

var knobWidth = 17; // ширина и высота бегунка

var knobHeight = 21; // изменяются в зависимости от используемых изображений

var sliderHeight = 21; // высота slider’а

var offsX,tmp; // вспомагательные переменные

var d = document;

var isIE = d.all || window.opera; // определяем модель DOM

var point = (sliderWidth-knobWidth-3)/(range2-range1);

// point - количество пикселей на единицу значения

var slider = d.createElement(‘DIV’); // создаем slider

slider.id = elemId + ‘_slider’;

slider.className = ‘slider’;

d.getElementById(elemId).appendChild(slider);

var knob = d.createElement(‘DIV’); // создаем ползунок

knob.id = elemId + ‘_knob’;

knob.className = ‘knob’;

slider.appendChild(knob); // добавляем его в документ

knob.style.left = 0; // бегунок в нулевое значение

knob.style.width = knobWidth+’px’;

knob.style.height = knobHeight+’px’;

slider.style.width = sliderWidth+’px’;

slider.style.height = sliderHeight+’px’;

var sliderOffset = slider.offsetLeft; // sliderOffset – абсолютное смещение slider’а

tmp = slider.offsetParent; // от левого края в пикселях (в IE не работает)

while(tmp.tagName != ‘BODY’) {

sliderOffset += tmp.offsetLeft; // тут его и находим

tmp = tmp.offsetParent;

}

if(isIE) // в зависимости от модели DOM

{ // назначаем слушателей событий

knob.onmousedown = startCoord;

slider.onclick = sliderClick;

knob.onmouseup = endCoord;

slider.onmouseup = endCoord;

}

else {

knob.addEventListener(«mousedown», startCoord, true);

slider.addEventListener(«click», sliderClick, true);

knob.addEventListener(«mouseup», endCoord, true);

slider.addEventListener(«mouseup», endCoord, true);

}

// функции установки/получения значения

function setValue(x) // установка по пикселям

{

if(x < 0) knob.style.left = 0;

else if(x > sliderWidth-knobWidth-3) knob.style.left = (sliderWidth-3-knobWidth)+’px’;

else {

if(step == 0) knob.style.left = x+’px’;

else knob.style.left = Math.round(x/(step*point))*step*point+’px’;

}

d.getElementById(‘info’).value = getValue(); // это вывод значения для примера

}

function setValue2(x) // установка по значению

{

if(x < range1 || x > range2) alert(‘Value is not included into a slider range!’);

else setValue((x-range1)*point);

d.getElementById(‘info’).value = getValue();

}

function getValue()

{return Math.round(parseInt(knob.style.left)/point)+range1;}

//слушатели событий

function sliderClick(e) {

var x;

if(isIE) {

if(event.srcElement != slider) return; //IE onclick bug

x = event.offsetX - Math.round(knobWidth/2);

}

else x = e.pageX-sliderOffset-knobWidth/2;

setValue(x);

}

function startCoord(e) {

if(isIE) {

offsX = event.clientX - parseInt(knob.style.left);

slider.onmousemove = mov;

}

else {

slider.addEventListener(«mousemove», mov, true);

}

}

function mov(e) {

var x;

if(isIE) x = event.clientX-offsX;

else x = e.pageX-sliderOffset-knobWidth/2;

setValue(x);

}

function endCoord() {

if(isIE) slider.onmousemove = null;

else slider.removeEventListener(«mousemove», mov, true);

}

// объявляем функции setValue2 и getValue как методы класса

this.setValue = setValue2;

this.getValue = getValue;

}

// конец класса

var mysl1 = new slider(‘sl’, 300, 0, 200, 20);

var mysl2 = new slider(‘sl2’, 400, 100, 200, 0);

Параметры данного класса:

• elemId – ID элемент, внутри которого размещен ползунок.
• sliderWidth – длина ползунка, измеряемая в пикселях.
• max – максимальное значение элемента, соответствующее крайнему правому положению ползунка.
• min – минимальное значение элемента, соответствующее крайнему левому положению ползунка.
• range1, range2 – нижняя и верхняя границы значений ползунка.
• step – шаг изменения значения ползунка (0 – единичный шаг).

В конечном результате должны получиться вот такие slider`ы:

В ползунке может быть любое количество рукояток. Если их больше одной, то вместо поля value нужно использовать values, который будет хранить массив значений (по одному на каждую рукоятку) [6].

Для того чтобы устанавливать и получать значения, нужно вписать:

mysl1.setValue(80); // устанавливаемое значение должно попадать в диапазон slider’а

mysl2.getValue();

После добавления этих строк появятся 2 кнопки, при нажатии на которые на нужном нам слайдере будет выставляться значение, равное тому, что было указано:

Также стоит отметить, что существует небольшая проблема. Обязательно нужно соблюдать пропорции между длиной, диапазоном и шагом slider`а, дабы избежать неленейных значений, что приведет к неработоспособности нашего плагина [5].

Заключение

В итоге с помощью вышеописанного общедоступного кода у нас получается функционирующий ползунок, значения, размеры и диапазоны которого можно подстраивать под конкретную задачу. Реализация занимает минимум времени и усилий, поэтому это отличный вариант для начинающих веб-разработчиков. Код можно не только подстроить под себя, но и улучшить, добавив дополнительные значения, которые будут подходить под конкретные задачи и выполнять определенные функции, которые не были указаны в данной статье [1, 2].