Иногда они возвращаются… снова

Совсем недавно на хабре пользователем bur был опубликован пост про приятные ползунки TrackBar. Они мне понравились своей простотой и возможностью их использования в совокупности с jQuery. Чуть позже был так же пост про слайдер, который определял диапазон времени, но его порицали за большой вес и «тяжесть». Тогда у меня и родилась идея создать на основе TrackBar ползунков для выбора произвольного диапазона времени. Придумано – сделано. И сейчас я представляю свои наработки хабраобщественности.

Итак, было:

Стало:


За основу я взял 3ю версию TrackBar адаптированную под jQuery и модернизировал только её, при желании можно попробовать перенести дополнения в оригинальную версию.
Сразу же приведу ссылки:
Третья версия TrackBar и её обсуждение
Четвёртая версия TrackBar и её обсуждение
Демонстрация обновленного TrackBar

Что было плохо

Первоначально ползунки были рассчитаны только для определения одного или двух исключительно целых чисел. Отсюда и вытекают все его недостатки реализации:

1. Работа только с целыми числами
2. Отсутствие засечек
3. Невозможность назначить свой текст вместо цифр

Исправление всех этих недостатков заняло где-то 3 вечера.

Что нового

Для того чтобы создать слайдер моей мечты, мне пришлось серьёзно доработать первоначальную реализацию и ввести новые переменные и события. Итак, что же нового и вкусного теперь умеют ползунки:

1. Показывать засечки 2 видов: маленькие и большие
2. Делать произвольные подписи:
   • над большими засечками
   • на ползунках
   • на левой и правой границе
3. Точно позиционировать ползунки на значения при их перетаскивании
4. Самостоятельно создавать свои скрытые input'ы для форм (без необходимости писать свой onMove)
5. Переопределять извне на лету:
   • Позиции ползунков и значения переменных
   • Левый и правый пределы
   • Засечки
6. Выводить интервал значений за установленные границы
7. Скрывать ползунки, если их значение вышло за установленные пределы
8. Гибко настраивать всё перечисленное
9. Совместимость с четвёртой версией

Часть новшеств можно увидеть тут:

Архив со всем файлами

Полный список новых настроек с кратким описанием:

Дополнительные параметры (параметр: значение по умолчанию):

showSmallTicks: true – флаг, который разрешает или запрещает показ маленьких засечек

showBigTicks: true – флаг, который разрешает или запрещает показ больших засечек к которым можно назначить текст

showBigTicksText: true – флаг, который разрешает или запрещает показ текста рядом с большими засечками

tickRoundUp: =roundUp=0 – переменная, которая отвечает за количество засечек, а именно количество значений, которые будут располагаться между 2мя соседними засечками; по умолчанию значение равно 0 и засечки не показываются

tickDivider: 5 – переменная, которая отвечает за количество маленьких засечек между большими (на единицу больше этого значения)

allowOverrideBorders: false – флаг, который разрешает или запрещает диапазону уходить за установленные границы с сохранением интервала

precisePositioning: false – флаг, который разрешает или запрещает точное позиционирование ползунков

leftInputName: id+'Left' – переменная, которая используется для создания скрытого input'а для левого ползунка (если установлен флаг dual) или для всего слайдера (если dual не установлен)

rightInputName: id+'Right' – переменная, которая используется для создания скрытого input'а для правого ползунка (если установлен флаг dual)

createHiddenInputs:false – флаг, который определяет, создавать и управлять скрытыми input'ами или нет

Дополнительные события:

onLeftLimitTextSet, onRightLimitTextSet – установка текста на левой и правой границах ползунка

onLeftSliderTextSet, onRightSliderTextSet – установка текста на левом и правом ползунке

onBigTickText – установка текста на больших засечках, передаётся значение, на котором стоит засечка

Дополнительные функции:

updateLeftValue (v4), updateRightValue (v4) – функции для установки левого и правого значения ползунков, в третьей версии их не было, но они появились в 4-й, я тоже решил их добавить сюда

SetPositionWithNoMove – установка положения бегунка по изменившимся извне значениям без вызова события onMove (пришлось ввести, чтобы нормально работали функции updateLeftValue, updateRightValue)

SetPosition – тоже самое, только с вызовом onMove()

SetRuler – переопределение засечек

ResetLimits – переопределение граничных значений

Если в 4-й версии работу со слайдером сводилась только к вызову updateLeftValue и updateRightValue, то принцип работы с обновленным TrackBar следующий:

1. Сначала мы напрямую устанавливаем необходимые значения, к примеру
   var scaleObj = $.trackbar.getObject("scale");
scaleObj.leftValue = 10;
scaleObj.rightValue = 20;
scaleObj.rightLimit = 100;
2. Потом мы вызываем одну или несколько функций применения значений, к примеруscaleObj.SetPosition();
scaleObj.ResetLimits();
   

Для демонстрации всех возможностей были взяты оригинальные демо и немого приукрашены (синим цветом выделены добавленные параметры), так же под номером 7 я добавил пример организации выбора диапазона произвольного времени, основанного на двух ползунках: верхний определяет масштаб диапазона, нижний его задаёт. В ней все доработки используются на полную катушку, самый наглядный пример использования.

Самое интересное в доработке оригинальных ползунков было добавление в них засечек. Их реализация могла быть различной, но я остановился на следующем подходе.

1. Сначала организовывается основной div, в котором будет находится шкала и он становится вниз под линию с ползунками
2. Затем генерируется набор с различными id, по которому определяется какую засечку рисовать
3. Чтобы засечки не сливались, как сиамские близнецы, между ними вставляются , при этом ширина вычисляется для каждого ползунка отдельно.

По примерно такому же принципу строятся и подписи под шкалой.
Такой подход позволяет просто и быстро создавать засечки и контролировать их через css, однако у него есть один существенный недостаток: не все браузеры используют все знаки дробного значения, отбрасывая или округляя их. Поэтому при большом количестве засечек (больше 40) явно можно заметить, как справа засечки не покрывают полностью трекбар (см. пример 1) и существует расхождение между расположением засечки и реальным значением. На небольших значениях это совсем незаметно.

Кроссбраузерность и известные недочёты

Первоначально вся разработка велась на Firefox второй версии, что помогло просто и быстро создать достаточно хорошую верстку для засечек и в дальнейшем оптимизировать её под другие браузеры. Итак, приступим к анализу работы слайдеров в различных браузерах.

Firefox v2.0.0.13
Никаких проблем не замечено, всё работает так, как и задумывалось. Единственная проблема, которая может иногда возникнуть – это неправильное соответствие засечек и значения на правой стороне слайдера при большом количестве засечек, но об этом писалось выше.


IE v7
Как ни странно, но всё работает прекрасно, примерно так же, как и в Firefox, только тут уже больше расхождение в правой части слайдера. Плюс ещё сами засечки отрисовываются выше на пару пикселей.


IE v6 и v8b1
По внешнему виду тут всё как у IE 7, только отсутствует прозрачность центральной части. Не сильно критично, но неприятно, особенно в IE 8. Возможно, просто неправильно определяется значение прозрачности в css и это теоретически можно вылечить в будущем как-нибудь. В IE 6 в 7м примере немного текст выехал за границы и перешёл на новую строчку.


Safari 3.1.1
Тоже всё почти без проблем, но тут уже более сильный недобор по засечкам до конца слайдера. Это заметно в первом примере, где-то 10% слайдера ими оказывается не покрыто, поэтому для Сафари не рекомендуется делать больше 50 засечек.


До этого момента процесс тестирования доставлял одно удовольствие, но потихоньку закрадывалось ощущение, что не всегда всё бывает так, как мы хотим и где-то обязательно должны были вылезти грабли. И они таки вылезли в...

Opera 9.27
Даже не знаю с чего начать. В принципе если отключить засечки, то всё прекрасно, не считая артефактов при отрисовке движения слайдеров: остаются неприятные желтые следы на месте подписей слайдеров, более того не всегда они исчезают при быстром перетаскивании и не редки случаи возникновения нескольких значений на полоске. С засечками в Опере совсем беда, поскольку принцип их создания основан на использовании дробных значений ширины. Эксперименты показали, что опера признаёт только целые значения процентов. И ей наплевать, что 0,8% от 500 пикселей это целых 4! пикселя (как в первом примере). Ладно, если бы она округляла, так нет – дробная часть просто отбрасывается и остаются голые 0%. Переубеждать её, я так понимаю, бессмысленно, поэтому мы наблюдаем все прелести такого подхода к не целым процентам в 1 и 2 примерах. Остальным удалось избежать такой участи, поскольку там значения ширины были около целых, и отрезание сотых долей процента погоды не играло, как в примере №7, где значения получаются 1,02% и 6,06%, причем они специально не подбирались, думаю это происки НЛО Ж). Про то, что она при этом всём ещё и заметно тормозит писать бесполезно (зависимость следующая: чем больше слайдеров с засечками, тем больше тормозит).


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

Что в будущем

Честно – не знаю, явных задатков ясновидения у меня нет. Гадать что будет, я не хочу, время покажет.


UPD: Многие высказываются, что оно тормозит(особенно в Опере) и из-за этого не совсем юзабельно. Тормозит не сам javascript-код, а рендер браузера про большом количестве засечек(причём суммарно со всех слайдеров), если запустить отдельно пример №7, то становится много шустрее и приятней. Но это не снимает других проблем, над которыми будем работать.