Как стать автором
Обновить

Комментарии 110

Плюс — в карму,
скрипт — в «рецепты»,
замечание — в комменты.

Замечание: у меня все отлично отображается в ИЕ6 и Сафари, во 2-м фф при быстром перемещении ползунка он визуально рвется, а в опере 9.21 бедняжка вообще визуально уродуется при любом перемещении. Вот если бы вы чуть-чуть доработали эти моменты, цены бы вам не было )
В фф рвется не из-за самого скрипта, в тестовом примере изменяется background-position. Как оказалось фф этого не любит. В третьей версии глюка нет.

В Опере посмотрю.
Кстати, соврал: 7-й IE у меня. Оказывается :)
Так, исправил:

В 9.26 действительно лажа была :) Я уже давно на 9.5 пересел.

В FF стало получше, глюк теперь остался только на средней линейке в примере, и похоже что это всё-таки не из-за background-position. Может у кого-то другово есть идеи, как победить?

Показал как можно избавиться от дрожания в ИЕ6.

В Netscape7 теперь тоже работает ;)
С FF это косяк браузера. Когда ползунок порвался попробуйте изменить размера окна браузера и вы увидите, что картинка наладилась. Значит надо заставить ФФ сделать отрисовку, например так:

var el = document.getElementById('DoubleTrack-3-Tracker')
el.style.borderTop = '1px dotted #CCC'
setTimeout( function(){el.style.borderTop = 'none'}, 10)
скрипт — в «рецепты»,

Простите за мою тупость, это блог? %)
Я минут пять не мог найти список всех блогов, нашел, кажется посмотрел все 20+ страниц, не нашел «рецептов».
видимо, "рецепты" - это личный список решений, в голове. :)
поиск на хабре ищет в том числе по названию и описанию блога ;)
Нет, это я для себя ))
Просто у меня есть специальная папочка с рецептами, где в тематических разделах аккумулируются скрипты, документы, шаблоны, иконки и т. д. — все, что может когда-нибудь пригодиться.
Раскусил :)
Да, именно на него я смотрел когда делал (не в смысле в код). Просто там глюки с тем, что не всегда ближайший ползунок пододвигается и крайние значения строго прибиты к краю элемента, а это по условию задачи было недопутимо :)
ух ты, а по питеру нет такого сервиса?))
будет как Тёма поймает заказчика из риэлторов в Питере :)
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Я сейчас кстати понял, почему он так работает странно. Там шкала — логорифмическая, когда щелкаеш возле 1 млн, двигается левый ползунок, хотя правый ближе раза в 3.
Хреново с ajax сделали кстате. Сортировка найденного и навигация по найденному работает только в опере, а в остальных броузерах - глючит.
Ещё у миель есть dom.miel.ru, rent.miel.ru клоны окромя информации.
Приложите пожалуйста, если есть возможность, полный zip-архив с картинками и html.

И такое предложение:
Было бы замечательно если бы вы добавили параметр "заморозки" бегунка в определенном месте, Бывают случаи, когда пользователю нельзя давать возможность менять верхний или нижний предел. А также возможность работать в одиночку.

Ну и конечно, не сочтите за наглость :), в перспективе, переписать на jQuery, потому как уже имеющееся решение, работающее в паре с interface.js получается тяжеловесным(хотя и работает по обоим осям).
1 сделал
2 имеется ввиду disabled? А под работать в одиночку что имеется ввиду?
3 Чесно говоря не вижу особого смысла но может и сделаю.
1. спс
2. да, disabled( или уже есть :-X ). В одиночку - в смысле без левого - классическое решение(на случай если применять одновременно и те и другие, чтобы все работало на одном коде).
3. Ну ладно, если потом понадобится, сам перепишу :) после такой готовой работы дело не тяжкое.
Обновил, обрати внимание на предпоследний ползунок ;)
Можно просто задать Disabled = true а можно функцию возворащающую значение задать.
ага, вижу.
Только я имел ввиду зрительный эффект и без смещения градуировки, то есть пользователь видит полупрозрачный бегунок замороженный на конкретном значении, и наглядно ясно, что этот параметр изменению не подлежит(ну как в ОС)

так или иначе - спасибо, в карму я вам еще час назад плюсанул.
Визуально затемнять при использовании функции Disabled не получится. Да и неправильно это что-то визуально меннять в JS. Но зато я кое что подправил и теперь можно, например, заморозить левый или правый ползунок )
Ну тогда его надо будет покрасить в пассивный цвет, иначе юзеры весь тачкрин исцарапают ногтями.
и еще, вы описали функцию getElemetntById "заняв" важный символ функции $,
а значит при совместном использовании с jquery прийдется писать noConflict, и то же самое касается мутулз.

Я в таких случаях (когда писал без фреймверков) называл функцию ge() (от getElement), а потом однажды открыл js vkonktakt-а и увидел, что они ее сократили тоже до этих же 2 букв ;)
Нет, я написал лишь пример ;) Когда вы будете использовать скрипт, вы врпаве достать нужный элемент любым удобным для вас способом, а можно просто id передать в виде строки.
На всякий случай по другому сформулирую: символ $ не используется нигде внутри cDoubleTrackBar, потому и объявлена в test.html
блин, да, смотрел по диагонали, сорри за панику :)
А если перетаскивать один ползунок и отпустить левую кнопку вне его области, то можно передвигать другой ползунок вместе с первым. При особом упорстве хоть все сразу :)
PS Работает в FF2.
Это особенность всех драгандропов. onmouseup вне окна не обрабатывается.
спасибо, это то, что мне было нужно и что не смог сделать программист ))) хорошо, что я с ним попращался
Отлично!
в IE6 иногда пропадает заливка оранжевая.
Хм… не получается такого получить… Есть косяк при движении правого ползунка в третьей строке вправо в FF2, в эксплорере всё вроде хорошо.
Получается что подтормаживает загрузка картинки hline-c.gif
т.е. если дотронусться до ползунка внизу пишет "Загрузка ... hline-c.gif" ингда загружается а иногда так и остается.
Вобщем не знаю, может у меня что-то. Заголовки вроде правильные.
У меня такого эффекта нет, т.е. не пытается загрузить.
Странно, что он его вообще пытается загрузить, там же не меняется ни src у картинок не background-image, и даже из поля зрения ничего не пропадает.
Не, это не косяк скрипта.
Например здесь, если навести на часики возле времени публикации топика, то они прыгают.
Возможно что это вообще только у меня :)
Такое бывает из-за небольшой казалось бы разницы в часах на сервере.
Я борюсь с эти так:
Date: Sun, 11 May 2008 08:58:53 GMT
Server: Apache/1.3.39 (Unix)
Cache-Control: public
Content-Description: File Transfer
Expires: Sun, 18 May 2008 08:58:53GMT
Pragma: public
Last-Modified: Sat, 12 Jan 2008 23:21:39 GMT иногда вот здесь стоит выставить время пораньше.
Connection: close
Content-Type: image/gif

Но в общем и целом это конечно мелочь. Сенкс еще раз.
НЛО прилетело и опубликовало эту надпись здесь
Оказалось что есть ;)
Нужно RoundTo, которое по умолчанию имеет значение 1 выставить, например, в 0,01.
Только появляется косяк при преобразовании такого числа в строку (см полузон №2)
Качественный скрипт, одно маленькое замечание - если один из ползунков заморожен, то при клике на сам trackbar ближе к замороженному чем к рабочему ползунку ничего не происходит. Хотя по логике туда должен прибежать рабочий ползунок (ведь замороженному все равно некуда двигаться)
С одной стороны — дв, но если скажем он заморожен не с краю? Пользователь нажимает на него, явно пытается сдвинуть его, а сбивается второй ползунок, не очень хоршо получается.
Можно сделать ему "зону неактивности" :) чтобы если тыкали прямо около него, то ничего и не происходило
И есть еще маленький глюк (Opera 9.27)



Проявляется хаотично :) Адская точность
Да, я знаю :) и это не только в опере. Это из-за двоичной сущности чисел. Может есть идеи как исправить?
Округлять/отрезать числа до 2 знаков после разделителя перед выводом?
Это и так результат округления до 0,01. Отрезать от уже готовой строки — как то через опу.
x.toFixed(2) пробовал?
За наводку спасибо, toPrecision спасло, но оно не подойдет для больших числел, а toFixed для целых возвращает нули после запятой. Вообще конечно это не совсем проблема скрипта, так бывает при любом преобразовании дробных чисел к строке.
Блин, toPrecision тоже не совсем то, пусть toFixed остается.
Можно делать так:
Пусть надо округлить число x до 10^-k, тогда:
1) y = x * 10^k, округленное до целого
2) Результат - y / 10^k + "." + y % 10^k.
Javascript совсем не знаю, поэтому код не привожу.

Изяществом этот способ тоже не отличается, да и с переполнением целочисленных типов могут возникнуть проблемы, но как вариант...
Попробуйте этим способом округлить 3,05 до 0,01 ;)
Вообще в jQuery.UI есть такой элемент
http://ui.jquery.com/functional_demos/#ui.slider
http://docs.jquery.com/UI/Slider
http://dev.jquery.com/view/tags/ui/1.5b2/demos/ui.slider.html
Чесно говоря, да, не видел, но смотря на них думаю может и к лучшему. Во первых конечно же опыт хоршоий, во вторых визуальные компоненты на jQuery обычно не отличаются опрятность, так, пример, если правый ползунок поднести к левому, он на определенной точке остановится, а потом отпрыгнет на пару пикселей назад. В третьих меньшее количество элементов при меньшей их площади дают нагрузку на процессор больше в 2-3 раза. Ну и в четвертых там все равно нет 50% того функционала что мне понадобился.
Заглянул в jQueryUI посмотреть чем же так народ восторгается и, блин, глюкавость и кривость на первых же открытых тестах в IE6. Смотреть дальше даже желания не возникло.
глючит оно как-то. например если во втором примере если поводить возле "10:00".
и кто с этим будет разбираться?
хомя, вкусно, пасиб
>>готового решения на jQuery не нашел

Недавно тоже необходимо было решение с 2мя ползунками и тоже под jQuery.
Если готовое решение от самого jQuery:
http://dev.jquery.com/view/tags/ui/1.5b2/demos/ui.slider.html
ваше сообщеение соответствует вашему нику :) на 30см выше уже было
Похоже недоглядел :) всякое бывает.

>>ваше сообщеение соответствует вашему нику :)
то отношение моего ника к так называемому "БАЯНУ" только в созвучности произношения, а не написания.
Поставил +/+, т.к. компонент действительно впечатлил, но на первый взгляд. Из недостатков:
- в примере от jQuery при выключении JS всё равно можно задавать значения, у вас - нет. Вот вы там отреклись от jQuery - пожалуйста, но сделали это рано, не поняв еще что главная идея в jQuery - это Unobtrusive JavaScript и, в частности, Graceful degradation.
- замороженный ползунок не отличается от активного.
- жалко что ширина фиксирована (надеюсь это не техническое ограничение)

Хотя, надо признать, ваш компонент выглядит очень юзабильным и продуманным.
Если хотите узнать профессиональное мнение - не поленитесь запостить Горбунову.
Ой, посмотрел вашего вдохновителя (не код), вот имхо пример отличного поведения: при выключенном js - только стандартный ввод с editbox'ами (и я бы сделал с selectbox'ами для дискретных), а при работающем js добавляется дублирующий продвинутый компонент, который (хочется надеятся) автоматически берет главные настройки из вышеуказанных стандартных компонентов.
к задаче автора отсутствие js никак не относится. а решение от «вдохновителя» на чистом DOM'е (судя по задаче — запись выбранного числа в input) серьезно подтормаживает в опере и чуть-чуть в фоксе, в ие6 просто еле пашет. я бы сначала отметил это (т.к. js включен почти у всех), а потом уже ненавязчивость js.
По первым двум пунктам могу сказать что цель была создать слябосвязаный компонент который можно применить в очень многих местах. Для Desabled там стоит функция которая определяет замороженность ползунка, а зависеть она может в идиале от чего угодно, да и вообще с точки зрения компонента там нет ползунков, посмотрите внимательно, ему передаются дорожка и полоска на этой дорожке, а уж есть на концах дорожки что-то или нет, зависит от применения. Именно по этой же причине код, подавляющий дражание в ие6 тоже вынесен в пример а не в компонент, точно так-же как и обновление рисок сверху, и расположение рисок снизу, это все регулируется окружением. Вместо (или вместе) рисок сверху могут быть текстовые поля (http://kvartira.miel.ru/) или может быть уверенность что js не может быть отключен, как в моем случае с киосками. Кстати от jQ я не отрекался, я даже думаю что под jQ все-же его приспособлю, просто предложенные варианты мне не поравились дискретностью значений и не сильной опрятностью (я выше объяснил).

Насчет ширины — да, самый большой минус :) нужно исправлять.

Юзабилита почти как на айфоне, над движущимся пальцем видно сразу значение котрое ты ставишь. Было бы вообще как на айфоне, если бы можно было двумя пальцами одновременно 2 ползунка двигать (эх, мечты).
Я задизеблил левый ползунок, но сделал это в css, еще раз доказав что это компонет со слабым связыванием :)
Такая вещь есть в JQuery UI. Это... всем известный компонент Slider ^___^
Просто надо было его немного поднастроить:
http://dev.jquery.com/view/tags/ui/1.5b2…
good luck ^^
Попробуйте его настроить хотя-бы на поведение второй демы, мне кажется это невозможно.
Его прелесть в том что там можно бегунок одновременно перемещать внутри квадрата - как бы точку внутри осей XY.

Ваш модуль очень хорош - он прост и чистый код, то что нужно, а когда что-то понадобится - будет удобно дописать недостающее. Поэтому я бы вам советовал перевести на jQuery и отправить на сайт например как Simple Slider(without UI), будет пользоваться популрностью.

мог бы еще раз проголосовать за вас - проголосовал бы :)
Спасибо, моя карма и так сегодня довольна :)
Хм. Да, вы правы ^^
Для такого поведение, мне пришлось изменять в свое время код Slider. Настройками это никак не сделать.
Вы молодец.
по тачскрину возюкать пальцем не слишком удобно.
да и вообще, задавать числа с помощью этих вебдванольных фигней просто ужасно...
лучше бы сделали радиобутоны или клавиатуру.
первое - для небольшого числа вариантов, второе - для точного указания чисел.
Э… как-бы у пользователя нет цели задать цифру, у пользователя есть цель как-то ограничить характеристика огромного количества товаров, ему не очень важно будет выбраны цены до 15600 или 15500 т.р., каклькулятор ему не нужен. Для небольших чисел естественно что-то другое, но 5 — уже большое число для радиокнопок.
нет, 5 - нормальное число. и 10 - нормальное. даже 20, если они идут одним списком и влезают в экран.
кроме того, всегда можно сделать двух-трёх шаговый набор с пошаговым уточнением.
есть простое правило: тыкать проще чем дрыгать.

> ему не очень важно будет выбраны цены до 15600 или 15500 т.р

в этом случае нужно просто предоставлять пользователю возможность ввести число не в штуках, а в тысячах штук, не напрягая его бесполезными тремя цифрами на конце.
Прелесть контролла в том, что не смотря на то, что это TrackBar, его можно тыкнуть ;)
угу, это понравится любителям лотереи.. тыкнул.. опа, не попал.. перелёт.. в нужное число.. значит нужно тыкнуть чуть в сторону.. но на сколько далеко?.. хз! нужно тыкнуть чтобы узнать.. тык!.. теперь недолёт.. значит нужно тыкнуть куда-то между первым тычком и вторым.. но куда?.. пока не тыкнем не узнаем..

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

впрочем, я-таки посмотрел демки.. вот хочу я, допустим, от 16 тысяч до 20. что мне даст тычок на 16000?
tensi, а у вас есть КПК или другое устройство в тачскрином? какой для вас более удобный способ и почему: "тыкательный" или "вазюкательный", и если вы не соврете, либо имеете опыт, то согласитесь, что slider редко бывает не к месту. Для меня приоритетом стали программы просмотра фото именно slide-управлением, клавиатура - тоже не тыкательная, а вазюкательная.
Вы же громкость в компьютере не радиобатонами выбираете и не цифры вбиваете, и сомневаюсь что хотели бы.

Вторая сторона - на экране допустим необходимо разместить 3 регулятора, что для пользователя будет дружественнее - три слайдера достойного размера или три ячейки и клавиатура? Имхо: в таком случае лучше смотреть на элементы под пальцем а не бегать неугомонно по глазами по экрану: то в ячейку, то на клавиатуру - и так три раза.
у меня есть и кпк и ноут. и заниматься акробатикой на тачпаде или тачпоинте - совершенно не вставляет.

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

громкость я регулирую хоткеями - быстро и удобно.

что мешает показывать клавиатуру рядом с текущей ячейкой?
Её ненужность.
*представил себе банкомат со слайдером*

о да, нужность слайдера настолько очевидна, что обосновывать его необходимость не имеет смысла...
никакой аналогии, зря представляли, общее только в схожести кузовов устройств.
и вообще наивная точка зрения - альтернативой слайдеру не всегда может быть кнопки и поле ввода. Представьте лучше 16-полосный эквалайзер по методу банкомата ;)
не жесты, а тот же зум в виде слайдера, про скорость и висту - это вы о чем-то другом уже...
вот ответь честно, тебе реально нужны значения отличные от "подогнать под окно", "оригинальный размер", "увеличить в два раза", "уменьшить в два раза"?

и что, это реально удобно зуммировать без возможности указать фокус (точку рисунка, которая сохранит своё положение относительно окна)?
мне не нужны эти кнопки, я увеличиваю до тех пор пока не буду четко видеть рассматриваемый объект, допустим фото конспекта на экзамене в pda и это будет злой шуткой, если не будет возможности добиться своего масштаба играясь вашими кнопками zoom x2 +/-

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

3-е - для того чтобы пользователь знал сколько можно вбить MAX-MIN - нужно делать приписку к каждому полю и выдавать ошибки если жмет лишнее, а так всю наглядно.

зы: я не верю, что так искренне можно спорить против слайдера, видели реостат? Можете сделать его именно дискретным и удобным переключателем сопротивления? мысль думаю ясна slider - имитация аналогового регулятора, кнопками он не заменится.
двухкратное изменение масштаба придумано не просто так - в промежуточных значениях сильно страдает чёткость.

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

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

ты не путай реальный девайс и его виртуальную имитацию. ты пробовал рулить эквалайзером посредством мыши? это крайне не удобно. причин две: невозможность одновременно рулить несколькими ползунками и отсутствие тактильного фидбэка.

ps: я не против слайдеров, как ты, видимо, подумал. я против дрэгэндропа и задавания слайдером конкретных значений, а не соотношения до/после.
пожалуйста без ТЫ

>>в промежуточных значениях сильно страдает чёткость.
мы не в прошлом веке - отлично работаютс системы сглаживания, а на >100% кратность тем более до фени, и еще - я не хочу кнопки в свой девайс для регуляции параметров просмотра

>> куча циферок
это АЖ два значения, которые хоть как нужно где то отобразить, так что не в тему,

>>после сообщения "у вас на счету ХХ денег,
>>сколько вы хотите снять?"
никто тут про слайдер не говорил, не будем мне вязать лишних слов, ок?

>>пробовал рулить эквалайзером посредством мыши? ... невозможность одновременно рулить несколькими ползунками ...
уже представил насколько удобнее всплывающей клавиатурой и

мне надоело - неубедительный вы оппонент
В лисе второй на третьем примере когда сводишь указатели вместе, а потом отдаляешь, то между полоской и правым бегунком остается пробел.
Глюк рендеринга. В фф3 исправлен. Идеи, как это обойти, очень пригодились бы :)
клин клином: border: 1px, border: 0px…
спасибо, хороший сайт
если честно, то удобства мало.
посмотрите на пример использования
первый трэкбар

мне надо выделить интервал от 6 до 8 и кликаю на 8 и 6.
что я получу?

не говорите, что можно подвинуть, глазами я уже зафиксировал эти две позиции, и рука желает двумя кликами зафиксировать их.
респект за отсутствие jQuery и размер скрипта. за отсутствие jQuery еще раз респект :)
Еще один вариант реализации такого контрола в одном из проектов нашей компании.
Сорри, ссылка потерялась http://belcollection.by/woman/
Несколько замечаний:
Переключатели «C размерами» и «Ценой» не нужны, так же как и «Все». К месту была бы надпись «Выводятся все» или «Выводятся с размерами от 43 до 48».

Кнопку «Обновить» не видно, а в идиале она не нужна вовсе.

«По изделий на странице» тоже лишнее, сразу ставте максимум — 16.

0% в верху страницы очень глючит.

Поставил от 300т.р. до 500т.р. — товаров не найдено, поставил размеры от 0 до 30 — тоже.

А вообще жесть, костюмы стоимостью пол-автомобиля %)
Блин, пидарка за 50 штук! Шоб я так жил.
это бел. рубли (:
Кстати мультислайдер есть в фреймворке от Backbase ( http://backbase.com) там вообще можно сколько угодно ползунков задать. Но конечно этот фреймворк не годится для использования ради пары контролов. Только если целиком проект или его большую часть(видел проекты сделанные на нем для банков, порталы, General Motors тоже не погнушался использовать). К тому же там не голимый javascript+html, а разметка на XML + XHTML + один из языков яваскрипт или XEL(свой язык тоже на базе XML) К тому же совместимость с основными браузерами(IE6,IE7,FF2,FF3,Opera,Safari) не только заявлена(это все говорят), но и реально поддерживается.
Кто хочет побаловаться, можно прямо в онлайне свои примеры пробовать. Откройте страницу с двойным слайдером:
http://demo.backbase.com/explorer/#|examples/doubleSlider.xml а на табе "Edit" поместите следующий код:

<b:slider>
<b:sliderGrippy name="grippy1" value="10" />
<b:sliderGrippy name="grippy2a" value="50" />
<b:sliderGrippy name="grippy2b" value="60" />
<b:sliderGrippy name="grippy2" value="80" />
<b:sliderGrippy name="grippy3" value="90">
<e:handler event="change" type="application/javascript">
alert( this.getProperty('value'))
</e:handler>
</b:sliderGrippy>
</b:slider>

Нажмите кнопку "See it Live", и вуаля - пятерной слайдер. До кучи смотрите в коде как можно красиво прицепить обработчик события на любой ползунок или на сам слайдер.
Да уж, такой кросбраузерный что в моей опере даже сайт с демами не открылся, про скорость лучше промолчу.
последний билд оперы 9.5бета? да не открывается, вот они релиз сделают и все будет работать, а когда у них сайты то работают, то не работают, тут подкрутят там отвалятся, никто на это затачиваться не будет.
у них куча проблем с разными аяксовыми фреймворками, а не только с бекбейз. пишите в оперу, в раздел бета тестирования, хотя думаю и без вас там уже понаписали. аналогичная ситуация с FF3, только у них пореже крупные косяки случаются, чем у оперы, но тоже бывает, не без этого. пользуйтесь релизами, а не бетами, чтобы высказывать обоснованные претензии.
А можно узнать по какой лицензии распространяется этот скрипт и можно ли его использовать в коммерческих приложениях?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории