JS-TrackBar, четвертая версия бегунков

Не так давно на Хабре был опубликован сей труд: «Еще раз о трекбаре», в котором описывается простой скрипт для создания таких вот ползунков:


Благодаря откликам пользователей возможности первой версии скрипта были существенно расширены. Она выросла до v3.0, с одновременным обновлением статьи, описывающей новый функционал. Однако, некоторые изменения откладывались «на потом», т.к. требовали более серьезного вмешательства в код. И вот долгожданное «потом» настало и вышла четвертая версия JS-TrackBar.

Архив TrackBar v4.0 — 31Kb.

О новом

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

Посмотрим, что реализовано в новой версии.

Совместимость с предыдущей версией

Хоть и мелочь, но основная демка содержит тот же js-код, что и предыдущая третья версия. Это значит, что если на вашей странице есть трекбары, работающие на более ранних версиях скрипта, можете преспокойно скачать и поставить четвертую, ничего не изменится.

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

В предыдущих версиях скрипт инициализации необходимо было размещать в нужном участке 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 и изменения вносил в эту версию скрипта «как придется», помощь в доведении её до ума приветствуется!

Кросспост JS-TrackBar, четвертая версия бегунков c webew.ru