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

Подвигать и посмотреть как оно в жизни можно здесь.
Установка
Скачайте архив TrackBar.zip (5.8Кб) куда вам там нужно его скачать, например, в папку со страницей для прикрутки бегунков.
В распакованном архиве вы обнаружите:
- examples.html - страницу с примерами, которая наглядно продемонстрирует что умеет скрипт и как его подключить.
- trackbar.js - яваскриптовое сердце.
- trackbar.css - внешний вид.
- Папка imgtrackbar - тоже внешний вид, немного изображений.
- Папка jQuery - всё тоже самое, совместимое с библиотекой jQuery.
Подключайте js- и css- файлы, кладите папку с рисунками, чтобы они были видны странице и приступайте к созданию простейшего трекбара.
Использование
В том месте HTML-кода страницы, где будет стоять трекбар, необходимо прописать JavaScript-сценарий:
onMove : function() {
},
width : 250, // px
leftLimit : 0, // unit of value
leftValue : 20, // unit of value
rightLimit : 100, // unit of value
rightValue : 80, // unit of value
hehe : ":-)"
});
В результате, получим такую полноценно работающую штуку, как изображено на рисунке:

Как несложно догадаться из кода, каждое свойство передаваемого в 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
- Еще что-то, о чем вы напишите :-)
Долой диктатуру селектов в поисковых формах!
© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.