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

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

Подвигать и посмотреть как оно в жизни можно здесь.

Установка

Скачайте архив TrackBar.zip (5.8Кб) куда вам там нужно его скачать, например, в папку со страницей для прикрутки бегунков.

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

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

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

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

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

В результате, получим такую полноценно работающую штуку, как изображено на рисунке:

Как несложно догадаться из кода, каждое свойство передаваемого в 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
• Еще что-то, о чем вы напишите :-)

Долой диктатуру селектов в поисковых формах!