Trackbar (бегунок) на странице

21 мая 2008, PitBult

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

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

Посмотреть основной демонстрационный файл , все новые возможности вынесены в специальную демку.

Установка

Скачайте Архив TrackBar v4.0 – 31Kb куда вам там нужно его скачать, например, в папку со страницей для прикрутки бегунков.

В распакованном архиве вы обнаружите:

examples.html – страницу с примерами, которая наглядно продемонстрирует что умеет скрипт и как его подключить.
trackbar.js – яваскриптовое сердце.
trackbar.css – внешний вид.
Папка imgtrackbar – тоже внешний вид, немного изображений.
Папка jQuery – всё тоже самое, совместимое с библиотекой jQuery.

Подключайте js- и css- файлы, кладите папку с рисунками, чтобы они были видны странице и приступайте к созданию простейшего трекбара.

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

В том месте HTML-кода страницы, где будет стоять трекбар, необходимо прописать JavaScript-сценарий:

trackbar.getObject('one').init({
onMove : function() {},width : 250, // px
leftLimit : 0, // unit of value
leftValue : 20, // unit of value
rightLimit : 100, // unit of value
rightValue : 80, // unit of value
hehe : ":-)"
});

Как несложно догадаться из кода, каждое свойство передаваемого в JSON-формате объекта выставляет соот-ий параметр:

width – длину всего трекбара в пикселях
leftLimit — минимальное значение для левого бегунка, в у.е.
leftValue — выставляемое значение для левого бегунка, в у.е. (больше минимального)
rightLimit — максимальное значение для правого бегунка, в у.е.
rightValue — выставляемое значение для правого бегунка, в у.е. (меньше максимального)

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

dual — по-умолчанию всегда выставлен в true. Если ему явно задать false, то 2 бегунка объединятся в один и будут бегать с одним значением. Выставление дефолтных параметров для объединенного бегунка происходит по параметрам левой части. rightValue просто игнорируется, даже если задано.
roundUp — параметр для округления (целое положительное число). Для того, чтобы ваши значения пробегали с определенным интервалом – укажите этот интервал. Например, если задать roundUp : 50, то значения будут 0, 50, 100, 150… (см. первый пример демки).
clearLimits — по-умолчанию всегда false. Если явно указать true, то не будут выводиться серенькие крайние значения.
clearValues — по-умолчанию всегда false. Если явно указать true, то не будут выводиться текущие значения над бегунками.
onMove — принимает в качестве значения функцию, которая через this имеет доступ ко всем свойствам объекта трекбара и может в процессе движения работать со значениями this.leftValue и this.rightValue. Так, в примере есть серия из трех бегунков, которые изменяют при движении RGB-компоненты цвета фона и ДИВа.

Что может этот трекбар?

Работать под:
XP (Vista): IE6, IE7, Opera 7.1+, Mozilla 1.7.2, FF1.5+. В Сафари работает с маленьким артефактом – между сомкнутыми бегунками остается 1 пиксель;
Linux: FF1.5, Opera 9 Mac: Safari, FF3b5
Принимать любую адекватную целочисленную длину (более 50px).
Работать интервалом или одним значением.
Тянуться как за бегунки, так и за интервал между ними.
Работать плавно или по дискретным значениям (roundUp)
С помощью ресета в CSS-се интегрироваться почти в любую страницу. Если верстка всё-таки поплывет — вы всегда сможете этот поправить сами.
Работать в специальном режиме debugMode. Если что-то не получается, выполните trackbar.getObject(‘hi’).debugMode = true; Возможно, сообщения об ошибках помогут вам разобраться.
Создавать на странице бесконечное кол-во экземпляров, НО! у каждого должен быть указал свой ID (.getObject(ID))
И самое главное! С помощью метода onMove можно на лету устанавливать текущие значения в поля форм или обрабатывать их любым удобным образом.
Код можно распространять где угодно и изменять как угодно. This code is a public domain.

Чего он не может

Работать под XP: NN7.1

Обновленная инициализация

В предыдущих версиях скрипт инициализации необходимо было размещать в нужном участке HTML-кода и принимал он всего один аргумент:

trackbar.getObject('one').init({
/* Параметры инициализации и функция обратного вызова */
});

Такой способ зачастую неудобен, т.к. требует изменения шаблонов проекта. Чтобы исправить этот недостаток, в четвертой версии расширены возможности метода .init() и теперь он может принимать в качестве второго аргумента идентификатор HTML-элемента:

trackbar.getObject('one').init(
{
/* Параметры инициализации и функция обратного вызова */
},
"elementId"
);

Соот-но теперь код инициализации можно вызывать где угодно, например, в js-файле, не изменяя HTML-код.

Синхронизация трекбаров

Это сразу бросается в глаза на специальной демке. Теперь трекбары можно связать между собой прямо в функции обратного вызова onMove, с помощью двух новых методов:

updateLeftValue — принимает в качестве аргумента значение для левого бегунка, которые мы хотели бы установить, и изменяет состояние трекбара в соот-ии с ним.
updateRightValue — аналогичен предыдущему, но для правого бегунка.

Рассмотрим, для примера код инициализации первого бегунка в спец-демке:

trackbar.getObject('one').init(
{
onMove : function() {
trackbar.getObject('two').updateLeftValue(this.leftValue);
},
dual : false, // two intervals
width : 300, // px
//  leftLimit : 0, // unit of value
leftValue : 0, // unit of value
rightLimit : 255, // unit of value
rightValue : 0, // unit of value
hehe : ":-)"
},
"oneId"
);

В этом коде создается трекбар с идентификатором ‘one’, а в функции onMove содержится фрагмент кода, означающий: «для трекбара с id=’two’, установить значение левого бегунка такое, как и у меня, текущего трекбара». Для симметрии аналогичной связывание реализовано во втором трекбаре:

trackbar.getObject('two').init(
{
onMove : function() {
trackbar.getObject('one').updateLeftValue(this.leftValue);
},
dual : false, // two intervals
width : 300, // px
//  leftLimit : 0, // unit of value
leftValue : 0, // unit of value
rightLimit : 255, // unit of value
rightValue : 0, // unit of value
hehe : ":-)"
},
"twoId"
);

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

О планах

Развитие проекта JS-TrackBar, вероятнее всего на этом не остановится. В новой версии планируется:

появление вертикально-ориентированных ползунков;
подробная документация на rus и eng;

О jQuery

Архив по-прежнему включает версию скрипта, совместимую с библиотекой jQuery. Однако, в ней обратной совместимости добиться не получилось, так что будьте внимательный при её использовании. Т.к. автор скрипта не использовал в своей практике jQuery и изменения вносил в эту версию скрипта «как придется», помощь в доведении её до ума приветствуется!

Источник: http://webew.ru/articles/387.webew