JS-TrackBar, четвертая версия бегунков
Не так давно на нашем портале был опубликован сей труд: «Trackbar на вашей странице», в котором описывается простой скрипт для создания таких вот ползунков:
Благодаря откликам пользователей возможности первой версии скрипта были существенно расширены. Она выросла до v3.0, с одновременным обновлением статьи, описывающей новый функционал. Однако, некоторые изменения откладывались "на потом", т.к. требовали более серьезного вмешательства в код. И вот долгожданное "потом" настало и вышла четвертая версия JS-TrackBar.
О новом
Основной демонстрационный файл не порадует вас ничем новым, т.к. все новые возможности вынесены в специальную демку.
Посмотрим, что реализовано в новой версии.
Совместимость с предыдущей версией
Хоть и мелочь, но основная демка содержит тот же js-код, что и предыдущая третья версия. Это значит, что если на вашей странице есть трекбары, работающие на более ранних версиях скрипта, можете преспокойно скачать и поставить четвертую, ничего не изменится.Обновленная инициализация
В предыдущих версиях скрипт инициализации необходимо было размещать в нужном участке HTML-кода и принимал он всего один аргумент:
/* Параметры инициализации и функция обратного вызова */
});
Такой способ зачастую неудобен, т.к. требует изменения шаблонов проекта. Чтобы исправить этот недостаток, в четвертой версии расширены возможности метода .init() и теперь он может принимать в качестве второго аргумента идентификатор HTML-элемента:
{
/* Параметры инициализации и функция обратного вызова */
},
"elementId"
);
Соот-но теперь код инициализации можно вызывать где угодно, например, в js-файле, не изменяя HTML-код.
Синхронизация трекбаров
Это сразу бросается в глаза на специальной демке. Теперь трекбары можно связать между собой прямо в функции обратного вызова onMove, с помощью двух новых методов:
- updateLeftValue — принимает в качестве аргумента значение для левого бегунка, которые мы хотели бы установить, и изменяет состояние трекбара в соот-ии с ним.
- updateRightValue — аналогичен предыдущему, но для правого бегунка.
Рассмотрим, для примера код инициализации первого бегунка в спец-демке:
{
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', установить значение левого бегунка такое, как и у меня, текущего трекбара". Для симметрии аналогичной связывание реализовано во втором трекбаре:
{
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 и изменения вносил в эту версию скрипта "как придется", помощь в доведении её до ума приветствуется!
© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
