webew
Войти » Регистрация
 
JavaScript

Trackbar на вашей странице

12 мая 2008, 22:20

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

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

TrackBar

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

Установка

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

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

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

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

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

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

trackbar.getObject('one').init({
    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 : ":-)"
});

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

TrackBar

Как несложно догадаться из кода, каждое свойство передаваемого в 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. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
NO USERPIC

rgbeast

А для чего JS-код прячется внутрь блока
//<![CDATA[
// -->


Живы ли браузеры, не знающие тег <script>?
12.05.2008, 23:36
Ответить

bur

Во-первых, эти контейнеры скажут браузеру, который не понимают яваскрипт (коих почти нет), что все содержимое тега - комментарий и его выводить не нужно.
А во-вторых, без этого фрагмента страница не проходит XHTML-валидацию, думаю по первой причине :-)
13.05.2008, 00:01
Ответить

bur

> Живы ли браузеры, не знающие тег <script>?

Не особо :-)
Может что в портативных устройствах осталось...
13.05.2008, 00:03
Ответить
NO USERPIC

huze

Большое спасибо за статью и скрипт. =)
15.05.2008, 11:55
Ответить

bur

Велкам!
15.05.2008, 12:00
Ответить
NO USERPIC

huze

Как бы ещё динамически этот трекбар изменять? Например, я захочу, чтобы один трекбар устанавливал размерность другого. Подскажите, пожалуйста!
16.05.2008, 18:47
Ответить

bur

К сожалению простого API для решения такой задачи пока нет.
Появится в четвертой версии трекбара в ближайшее время.
16.05.2008, 20:09
Ответить
NO USERPIC

huze

Два встречных вопроса:
- Как в jQuery-версии из-вне получить значение какого-нибудь свойства бегунка?
- Когда будет 4 версия?

Пожелания к новому трекбару:
- Управление свойствами и поведением бегунка из-вне (переинициализация, к примеру).
- Расширенная документация.

Спасибо. =)
16.05.2008, 23:38
Ответить

bur

> Как в jQuery-версии из-вне получить значение какого-нибудь свойства бегунка?
В jQuery-версии id трекбара - это index массива archive, поэтому обращение к свойствам будет выглядеть, например, так:
$.trackbar.getObject(4).leftValue

Не очень удобно, надо бы привязать к id.

> Когда будет 4 версия?
Ждите в ближайшие 3 дня. Я сообщу в комментарии и обновлю статью. Или напишу новую, в зависисмости от объема нового функционала :-)

Пожелания учту, спасибо.
17.05.2008, 12:03
Ответить
NO USERPIC

huze

Ещё пожелания: опциональная отрисовка мерных отрезков.
18.05.2008, 00:34
Ответить
NO USERPIC

huze

Я нашёл способ взаимодействия селектов, сделал динамику, но остался вопрос: как удалять из памяти трекбары? Обычное перерисовывание div'а не удаляет их из памяти.
18.05.2008, 00:39
Ответить

bur

Для удаления объекта используйте оператор DELETE:
http://wdh.suncloud.ru/js04.htm#ref3473

Удаляйте нужный экземпляр объекта из массива archive, соот-ий нужному трекбару.
18.05.2008, 13:32
Ответить

bur

А вот и четвертая версия:
http://webew.ru/articles/455.webew
20.05.2008, 12:16
Ответить
NO USERPIC

huze

Ещё одно пожелание: вертикальное ориентирование. Не уверен, что это будет легко, но это было бы интересно. =)
18.05.2008, 15:34
Ответить

1234ru

По-моему, очень круто. Молодец! :)
То, что не убивает нас, делает нас инвалидами.
18.05.2008, 15:47
Ответить
NO USERPIC

alexey

Александр, не подскажите как извне задать позицию бегунка?
пробовал повторно использовать init - не помогает:

$.fn.trackbarSet = function(value){
$.trackbar.getObject($(this).attr('id')).init({
leftValue: value
});
}

id для трекбара в $.fn.trackbar я беру от родителя
if ($(this).attr('id')!='')
op = $.extend({
id: $(this).attr('id')
},op);
19.05.2008, 16:45
Ответить

bur

alexey, сейчас идет разработка четвертой версии трекбара, API которого позволит изменять положение бегунков "на лету", а не только после инициализации.
В текущей версии это тоже возможно, но совершенно не удобно. Повторный вызов init - не решение задачи.
Рекомендую подождать четвертую версия, которая выйдеи уже "вот-вот", о чем, вероятнее всего, будет написана отдельная статья.
19.05.2008, 16:58
Ответить
NO USERPIC

alexey

спасибо. с нетерпением жду 4ю версию
19.05.2008, 17:01
Ответить

bur

Читаем:
http://webew.ru/articles/455.webew
20.05.2008, 12:15
Ответить
NO USERPIC

avtorpc

Добрый день!
Спасибо за ваш скрипт, установил его на странице dev.dverimastera.ru/catalog/filtr.php, Но не работают ползунки на трекбаре, может подскажите как решить эту проблему? Пробовал отладить сам, прописал trackbar.getObject('hi').debugMode = true; Но никаких ошибок не выводится, (куда они должны выводиться?) У меня не выполняется <div id="leftBlock_xxx" не проставляется style="width: xxxpx;"> В чем может быть причина?
02.08.2010, 00:46
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2024 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: