Вступление
Я занимаюсь веб разработкой и часто требуется прикрутить для интерфейса какую то деталь, которой нет в реализации html. Да, будь то всякие спины, трек-бары, и прочее. Всякий разумный пользователь, не желающий тратить время и силы на создание своего, естественно ищет готовую реализацию во всемирной сети. Однажды я так и поступил...
Искания
Нужен мне был всего лишь элемент трек-бар. На запрос в поиске нашел несколько готовых решений. Попробовал JS-TrackBar, очень симпатично, но мне он, к сожалению, не подошел по некоторым причинам. Мне нужно было легкое решение, не требующее подгрузки картинок, использующее jquery и адекватно работающее в разных браузерах, вообщем кроссбраузерно и без наворотов.
Идея
Первое что пришло в голову — переделать Track-bar «под себя», не использовать картинок, а рисовать все дивами с окраской. Получилось весьма… дурно)))
Вообщем после долгого терзания и размышления вспомнил про css свойство overflow:scroll. И решение пришло само собой. Вывести дивку нужного размера, а внутрь положить еще одну, но большей ширины:
Реализация
Осталось только повесить события на скролл этого дива, высчитать коэффициент для расчета получаемого значения, относительно максимального значения нашего трек-бара (переменная max) и сделать 2 варианта — горизонтальный и вертикальный трек-бар. Вот что у меня получилось:
Итог
Получилось «дешево и сурово», но в то же время довольно просто и функционально. Этот вариант подходит для «легкого» интерфейса, где не требуется излишество графики и дополнительные библиотеки.
Решил поделиться этой идеей, может кому пригодится. Я не стану переписывать свой примерчик без использования jquery, тк использую его повсеместно. На этом все =)