bur May 12 2008 at 23:41

Еще раз о трекбаре

1 min

3.6K

JavaScript*

+49

Comments 97

kvladimir May 13 2008 at 00:32

Большое спасибо!

abarmot May 13 2008 at 00:34

Красота! Плюсик вам!
А как черная надпись бегунка накрывает серую надпись границы — просто глаз не мог оторвать!

Щщастье было бы совсем полным, если надпись бегунка меняла положение плавно, а не перескакивала при пересечении им «экватора» (разумеется это совсем мелочь).

bur May 13 2008 at 00:37

Природная лень не позволит исправить этот мелкий недостаток :-)
Буду рад, если кто-то решит эту задачку, с удовольствием добавлю в дистрибутив...

abarmot May 13 2008 at 01:46

Готово!
надо заменить ф-цию «setCurrentState» следующим кодом:



	setCurrentState : function() {

		this.leftBlock.style.width = this.leftWidth + "px";

		this.leftBlock.firstChild.innerHTML = (!this.dual && this.leftWidth > this.width / 2) ? "" : this.leftValue;

		if(!this.dual) {

			var x = this.leftBlock.firstChild.offsetWidth;

			this.leftBlock.firstChild.style.right = (6 * (1 - 2*(this.leftWidth-6)/this.width) - ((this.leftWidth-6) * x / this.width)) + 'px';

		}

		this.rightBlock.style.width = this.rightWidth + "px";

		this.rightBlock.firstChild.innerHTML = (!this.dual && this.rightWidth >= this.width / 2) ? "" : this.rightValue;

		if(!this.dual) {

			var x = this.rightBlock.firstChild.offsetWidth;

			this.rightBlock.firstChild.style.left = (6 * (1 - 2*(this.rightWidth-6)/this.width) - ((this.rightWidth-6) * x / this.width)) + 'px';

		}

	},

ЗЫ. К сожалению в моем зоопарке только ФФ и ИЕ, работоспособность в других браузерах не проверял.

ЗЗЫ. Константа «6» унаследована из цсс, что не совсем хорошо.

bur May 13 2008 at 02:05

Вот спасибище!
Дистрибутив и пример обновлены. Вы в авторах (можете полюбоваться в комментариях к .js).
Работает замечательно!
Насчет константы не переживайте - она давно есть в виде свойства widthRem, на что я её и поменял. Можнj было свойство определить как бегунок.offsetWidth + const, но практика показала, что удобнее оставить так.

abarmot May 13 2008 at 02:14

Вам спасибо!

PQR May 13 2008 at 00:36

Хорошие трекбары, но опять нет нужной мне функции: захватить "отрезок" за середину и двигать его весь (правый и левый маркер будут двигаться одновременно, сохраняя расстояние между собой). Такое видели где-нибудь?

bur May 13 2008 at 00:39

Вообще не сложно реализовать. Вводится дополнительной опцией.
* делает пометку для третьей версии трекбара

ognevsky May 13 2008 at 01:37

видели, в каких-то примерах на днях для jQuery или prototype, только там с датами (типа календаря), но думаю переделать не особо сложно. там можно двигать влево-вправо оба бегунка, и весь выбранный диапазон целиком тоже влево-вправо. Если наткнусь — отпишу

bur May 13 2008 at 01:42

Всё действительно просто. Спасибо на помощь, но как автору объекта мне уже понятно что нужно поднастроить для описанной фичи. Обязательно сделаю и отпишусь об апгрейде.

PQR May 13 2008 at 22:45

О да, да! Мне же как раз необходимо даты двигать в предметной области приложения!)

bur May 13 2008 at 16:31

Нужная вам функция реализована. Статья в связи с этим немного отредактирована и обновлен архив.

PQR May 14 2008 at 00:20

Супер, большое спасибо! Покрутил в примере - то что надо. Архвивчик скачал.

Heath May 13 2008 at 01:23

Минус в том, что эта штуковина, в отличие от селекта, не управляется с клавиатуры. Я редко заполняю формы, используя мышку. Если бы между ползунками можно было стандартно переключаться tab’ом и двигать ползунки стрелками, это было бы хорошо. А так вы заставляете меня чаще хватать мышку, что не всегда хорошо.

bur May 13 2008 at 01:32

Ессно не стоит фанатично заменять все селекты на трекбары. Это необходимо делать в тех случаях, когда селекты становятся неудобными. Например, что удобнее, пролистать с клавиатуры две портянки числовых параметров "от" и "до" или ткнуть пару раз мышкой?
А насчет фокуса и управления с клавиатуры - теоретически это можно реализовать, но на практике усилия не будут стоить результат, особенно для недискретных трекбаров.

Heath May 13 2008 at 01:42

Тогда можно слева и справа оставлять поля для ввода, чтобы они были связаны с трекбаром. Впрочем, у вас в одном примере так и есть. Так что считайте, что это предостережение веб-программистам — не увлекаться и помнить о юзабилити. :)

bur May 13 2008 at 01:48

Юзабили - это наше всё :-)
Но природная лень опять же мешает сделать 100% юзабилити. В моем примере текстовые поля с атрибутом ридонли, т.к. нет обратной совместимости. То есть пользователь ввел букву - и это нужно отразить бегунком. Но это проблема примера а него скрипта трекбека, в котором все возможности для такого функционала заложены.

Pilot34 May 13 2008 at 01:38

под Маком в Сафари работает без глюков в 1 пиксель..

bur May 13 2008 at 01:43

Это замечательно! Спасибо что отписали, очень приятная новость.

sunnybear May 13 2008 at 01:54

в связи с засилием трекбаров буду готовить статью, который из них быстрее, и как их вообще разогнать можно :)

bur May 13 2008 at 02:09

Насчет "быстрее" дам пару подсказок. Быстрее тот, кто:
- выполняет меньше расчетов при муве,
- имеет меньше движущейся графики.
Вот и всё.
А засилья никакого нет :-) Как я уже писал - до практического применения трекбаров доходит редко.

fatal May 13 2008 at 02:19

Очень плохо, что ваше решение невозможно использовать в веб-приложениях или простых формах на веб-сайтах, где нужна деградация элементов управления до простейших полей формы.
Ведь, по сути, любой из ваших элементов управления это одно или два простейших текстовых поля. Вот, над ними и надо было надстраивать улучшенную функциональность. Тогда, при отсутствии JavaScript, пользователь сможет ввести значение в простое поле ввода.
Так же рекомендую посмотреть в сторону черновика стандарта Webforms 2, там уже есть элемент управления для указания диапазона (input type=range), а так же демонстрацию для IE и Opera.

bur May 13 2008 at 09:28

Смотрите внимательнее пример. Всё возможно. А вот встраивать это в движок так, как сделано в приводимой вами демонстрации не стоило. Т.к. из-за этого теряется динамичность скрипта.
Хотите сделать к трекбару 2 текстинпута? Легко! Прячьте их под слой трекбара или в тег noscript и связывайте через onMove. Вот и решение.
И кстати, "демонстрацию для IE и Opera" - это как минимум несерьезно.

fatal May 13 2008 at 20:13

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

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

Например, вместо:



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

});

можно будет в HTML написать:



<fieldset class="trackbar" style="width:250px">

  <label>От:

    <input type="range" min="0" max="100" value="20" name="track1a"/>

  </label>

  <label>До:

    <input type="range" min="0" max="100" value="80" name="track1b"/>

  </label>

</fieldset>

При этом сохраниться возможность ввода данных, для клиентов с выключенным JavaScript.

bur May 13 2008 at 22:01

Нивопрос, используйте вместо document.write(), поиск нужных инпутов и прописывайте тотже код по какому-нибудт событию, например, window.onload.
Никто вас не ограничивает.

fatal May 13 2008 at 23:33

Я-то так делать и буду, но жаль что большинство сделает просто "copy-paste", и отправку формы завяжут намертво на JavaScript...

Кстати, если отвлечься от этой темы, то вот ещё одно усовершенствование: передвигать ползунки не по "click", а по "mousedown". Так будет возможно надавить где-то на полоске, и не отпуская кнопку мыши, протащить ползунок. Такое поведение реализовано в аналогичном решении, попробуйте.

bur May 13 2008 at 23:39

Еще раз повторю, что намертво на JavaScript данные формы никто не завязывает. Реализация этой части находится в руках программиста, который прикручивает трек-бар и имеено для этого есть функция обратного вызова - onMove. Именно такой API изначально планировался, на наиболее динамичный и дающий больше свобод.

Mousedown уже предлагали. К сожалению реализовать не получится, т.к. есть функционал "ухватить и двигать весь интервал", который вступает в конфликт, с предложенным поведением.

Но в любом случае спасибо за предложения!

fatal May 14 2008 at 01:25

Вступать в конфликт не должен... ;)
Логика:
ЕСЛИ надавили в пределах текущего диапазона,
ТО двигаем весь диапазон,
ИНАЧЕ (надавили за пределами текущего диапазона) двигаем ползунок.

bur May 14 2008 at 01:40

Это скорее костыль.
Логика должна быть единой на всем диапазоне бара.

smartov May 13 2008 at 09:43

Спасибо. Хотелось бы узнать лицензию.

bur May 13 2008 at 09:53

Берите и пользуйтесь. Никто вас за это по рукам бить не будет. Только копирайт и список авторов в виде комментариев к скрипту оставляйте, если не трудно.

smartov May 13 2008 at 13:22

МОжет тогда стоить пролицензировать под какой-нибудь лицензией.
Судя по тому, что вы говорите, в вашем случае подходит Лицензия BSD.
Чтобы у тех, кто будет использовать, совесть была спокойна :)

bur May 13 2008 at 14:33

Чего не сделаешь для удобства пользователей :-)
Добавлю в третью версию трекбара. Её выход совсем скоро.

bur May 13 2008 at 16:32

Добавлена "лицензия".
This code is a public domain.
:-) Пользуйтесь!

smartov May 14 2008 at 12:27

Спасибо еще раз :)

ganzer May 13 2008 at 09:51

Хорошая работа!

NemeZZiZZ May 13 2008 at 10:12

Отличная работа!

uranik May 13 2008 at 10:29

А нет такого скрипта для Greasemonkey, чтобы прямо на лету переделывал селекты в трекбары на любых страницах?
https://addons.mozilla.org/ru/firefox/ad…

bur May 13 2008 at 10:32

Не уверен.
Не факт, что он вообще нужен. В большинстве случаев импользование селекта оправдано.

Wonder May 13 2008 at 11:06

Опционально можно добавить отключение вывода значений бегунка, чтобы в последнем примере с буквами отдавать значения только в callback-функцию, т.к. цифры не нужны.

На счёт комментария выше, касательно ввода значений с клавиатуры — можно вместо текстовых надписей двигать input-ы :-) Тоже опционально, конечно.

bur May 13 2008 at 11:26

Насчет отключения вывода значений бегунков - согласен. Возможность будет добавлена при а апдейте в ближайшее время.

bur May 13 2008 at 16:32

Реализовано. Пример и дистрибутив обновлены.

homm May 13 2008 at 11:27

> Она отличается от предложенной предыдущим автором как по дизайну так и по функционалу

Вы не верно поняли основную парадигму моего решения, если считаете что я предлагал дизайн :)
Мое решение никак не привязано к дизайну, весь дизайн находится снаружи, в файлах «test.html» и прикрепленной css. Голый функционал :)

Переезжающая подпись над единственным ползунком — очень круто :)

bur May 13 2008 at 11:33

Ессно дизайн - это в таких проектах рассматривается во-вторую очередь, после доступного функционала, и любой кодер с базовыми занниями CSS перепишет трекбар под себя. Но когда нужно быстро взять и прикрутить что-то, выгоднее работать с более привлекательным решением. Этим замечанием я не претендую на более прикольный дизайн, каждый решает это для себя сам.

К тому же я не нашел в вашем решении опции по объеденению бугенков в один и быстром измененеии длины. Это склонило чашу весов в сторону написания топика :-)

Спасибо за ваш скрипт! Нужно не лениться выкладывать такие вещи.

bur May 13 2008 at 11:35

А переезжающая надпись - заслуга abarmot. Еще раз спасибо ему за это!

Fragster May 13 2008 at 11:31

ИМХО следует добавить возможность «схватить» за диапазон, и сдвинуть его, не меняя размер этого самого диапазона. а так - ничего.

bur May 13 2008 at 11:34

Уже обсуждалось в комментах выше. Будет добавлено в кратчайшие сроки.

bur May 13 2008 at 16:33

Реализовано. Топик, пример и архив обновлены.

unclegluk May 13 2008 at 11:41

На Маке под FF3b5 работает. Правда нет времени подробнее поколдовать.

bur May 13 2008 at 11:43

Спасибо! Ловите плюс.

Kirax May 13 2008 at 12:07

Красиво, но очень разочаровало что при ползунок переходит под курсор по mouseup а не mousedown. Я привык нажать кнопку в нужном месте диапазона, а потом не отпуская выровнять до нужного значения, как в плеерах, а тут так не получается.

bur May 13 2008 at 12:16

Вряд ли получится реализовать эту фичу :(

alexbig May 13 2008 at 12:08

спасибо! отлично сделано. вопрос пока применения открыт.
очень понравилась деталь: когда двигаешь ползунок, цифра над ним смещается относительно его самого и на гранце сливается с предельной отметкой — супер!

bur May 13 2008 at 12:18

Не устану повторять, что переплывающий слева-направо ползунок - заслуга abarmot.

alexbig May 13 2008 at 23:22

прощу прощения, невнимательно читал комментарии.
в любом случае вы все отлично постарались.

1602 May 13 2008 at 12:29

Огромное вам спасибо. Сейчас перепишу для jQuery.

bur May 13 2008 at 12:31

Будет желание - выкладывайте решение сюда, добавлю его в дистрибутив.

1602 May 13 2008 at 13:57

Использование:
$('#id_elementa').trackbar(options);

Качать отсюда:
http://ifolder.ru/6540404

Изменения:
1. namespace перенес в $.trackbar
2. $.trackbar.archive сделал массивом
3. немножко поменял функцию инит (где было document.write)
4. идентификаторы внутренних контролов сделал локальными

bur May 13 2008 at 14:44

У меня ваш пример кроссбраузерно НЕ работает. Исправьте, пожалуйста, если не затруднит.

1602 May 13 2008 at 15:03

Да, моя забыл положить библиотеку jquery в пример.

Качайте http://ifolder.ru/6541350 - тут вместе с библиотекой. У меня работает на oper9,ie6+7,ff2

bur May 13 2008 at 15:11

Отлично!
Готовлю третью версию дистрибутива, откомментирую вам, когда выложу.
Спасибо!

1602 May 13 2008 at 15:15

Да и еще, leftLimit я поставил равным 100 для теста. Там конечно же надо вернуть на ноль.

bur May 13 2008 at 16:35

Третья версия дистрибутива успешно собрана. Я немного обновил ваш скрипт в соот-ии с другими изменениями. Всё прекрасно работает.
Обновлены статья, архив и пример.
Вы обозначены одним из авторов в комментариях к соот-ему коду.
Спасибо за участие в разработке!

xgraven May 13 2008 at 12:59

IE7 ругается на активное содержимое. Это из-за того что JSON, а не обычный яваскрипт?
А вообще красиво сделано.

bur May 13 2008 at 13:04

Может проблемы с локальной версией?
Если смотреть с хоста - то всё замечательно. Опишите, пожалуйста, условия?

xgraven May 13 2008 at 13:13

Да, извиняюсь, это с локального диска, а с сайта даже с дефолтными настройками безопастности в ИЕ7 все хорошо.

Wonder May 13 2008 at 16:41

В IE 6 дёргается правый серенький литит.
В остальном третья версия прекрасна :-)

bur May 13 2008 at 16:43

IE6 - знатный тормоз. Наверное, оставлю так, вроде не смертельно.

Zitrix May 13 2008 at 22:59

интересно, почему никто еще до snap'а (привязки) не догадался? как на https://www.master-credit.ru/credit/inde… (только там придется несколько форм сначала заполнить)

bur May 13 2008 at 23:45

Такие вещи пишутся исходя из конкретных задач. Например, в представленном мной трекбаре все возможности для связи между собой есть, необходимо сесть и написать свою пользовательскую функцию с нужными формулами.

Zitrix May 14 2008 at 00:11

да не, я не про это. snap, в том же фотошопе есть привязка к guide line и grid'у. живой пример — регулятор balance у winAmp'а (тот, что рядом с громкостью), т.е. если человек подвинул курсор мыши на 49.9% длины линейки, то почему бы не довести курсор ползунка (который драг-дропится) к показательному значению в 50%? сохранение дискретности перемещения + авто-подводка под показательные значения.

bur May 14 2008 at 00:30

ААА, вот о чем речь :-)
Если Вы пройдете по ссылке в начале статьи на другой трекбар - там привязка работает.
В этом дистрибутиве тоже можно реализовать, но я решил не заморачиваться на визуальном эффекте, а дискретность значений дает roundUp. Возможно к следующей версии подготовлю.

Zitrix May 14 2008 at 00:45

было б здорово, еще могу предложить на рассмотрение деление всей линейки на несколько отрезков с разной "плотностью" значений :) но это уже, наверно, кардинальный пересмотр всей работы.
со "вчерашней" ссылкой ввобще мистика: жмакаю по ней — попадаю на 404ю, перехожу через блог javascript — показывается (урла одинаковая, я в шоке). если мы про "Элемент управления, TrackBar но с двумя ползунками", то я там присоски к показательным зн-ям не обнаружил, причем, даже если по цифрам в примере кликать, то все-равно курсор по мышке выставляется.

bur May 14 2008 at 01:13

Как раз перстпективы развития свомим 2-мя постами вы и обозначили :) Куда-то, кстати, пропал предыдущий трек-бар.

Zitrix May 14 2008 at 00:53

ну а в целом, да, это сродни типографике. вроде и мило, а ультимативного аргумента в пользу применения нету

bur May 14 2008 at 01:18

Думаю скоро разработчики интерйфейсов современных навороченных веб-приложений скажут свой веское слово :-)

bur May 14 2008 at 14:31

Трекбар предыдущего автора:
http://stratero.ru/homm/doubletrackbar/t…
третий по счету

ognevsky May 14 2008 at 01:04

firefox 2.0.0.14 под macOS — полет отменный, допишите в посте, если что :)

bur May 14 2008 at 01:14

Спасибо! Обязательно допишу.

UFO just landed and posted this here

bur May 14 2008 at 12:29

Это лишнее :-)

AKS May 14 2008 at 11:24

document.write???

bur May 14 2008 at 12:29

Чтобы не делать привязки к нодам был выбран наиболее простой путь.

smartov May 14 2008 at 13:34

Предложение по усовершенствованию.

Т.к. трекбар предполагается использовать в формах, то будет не очень удобно обработку его значения дополнительно вешать на javascript.
Поэтому предложение - чтобы при создании трекбара так же генерилось поле типа hidden с именем (name) равным trackbar_id (id соотв. трекбара). В случае с "dual трекбаром" - именем равным trackbar_id[].
И, соответственно, чтобы это поле (поля) заполнялись соотв. значениями при изменении трекбара.

smartov May 14 2008 at 13:37

Там немного описался - при dual трекбаре - два поля с одинаковыми именами trackbar_id[] (где trackbar_id - это id соотв. трекбара)

bur May 14 2008 at 13:42

Это, имхо, уже лишнее.
Каждый сам решает к какому элементу формы привязать трекбар (или вообще не привязывать, подгружая результат по ajax).
Для этого есть функция обратного вызова.
А усложнение дистрибутива в этом направлении отрицательно скажется на его простоте и понимании.
На определенном этапе следует перестать усложнять API :-)

smartov May 14 2008 at 21:19

Чорт :) Придется делать fork прожекта :D

bur May 15 2008 at 09:46

Можно прописать всего лишь дополнительный метод. Реализацию ждите после ближаших выходных.

romka8 May 14 2008 at 17:46

а можно ли этот trackbar развернуть вертикально или в данном решение это пока не реализованно?

bur May 14 2008 at 19:16

Не реализовано.

romka8 May 14 2008 at 20:14

Планируется или тоже лишнее? Мне очень понравилось как все сделанно но по великому сожалению нужен вертикальный :-) Я тут нашел парочку на http://www.script.dvostok.com/Forms/demo… может кому пригодится

bur May 15 2008 at 09:45

Планируется. Ждите после выходных реализацию ;-)

romka8 May 14 2008 at 20:25

странно сслку верную дал но с хабра не открывается хотя буква в букву все одинаково script.dvostok.com/Forms/demo_carpe_slider_.html

Wonder May 15 2008 at 15:14

Это всё из-за слова script в ссылке. Защита, чтобы нельзя было запостить ссылку, по нажатию на которую выполнялся бы какой-то скрипт. Я так это понимаю.

romka8 May 15 2008 at 15:18

это все НЛО ведь даже если скопировать ссылку и даже если в любой другой браузер попытаться вставить ни чего не получится

fatal May 15 2008 at 21:34

Защита, абсолютно тупая, надо сказать, особенно учитывая специфику Хабрахабра.

Holden May 16 2008 at 09:47

Ура!!! У меня невероятная эйфория!!! То что нужно именно сейчас.
Автору +1000

Show the best of all time