Выбор диапазона а-ля Я.Маркет

[crocodile2u]

Требуется сделать элемент интерфейса, ближайший аналог - выбор диапазона цены на Я.Маркет. Например - http://market.yandex.ru/guru.xml?CMD=-RR=9,0,0,0-PF=2142557979+TR+sel+select-VIS=160-CAT_ID=160043-EXC=1-PG=10&hid=91491 (фильтр по цене).

Возможно, кто-то знает готовый компонент (плагин для jquery - идеальный вариант) ? Не найдется - буду писать сам

 

[c0dex]

Есть такое нечто как Slider для jquery

http://docs.jquery.com/UI/Slider

 

[Gremboloid]

так там и используется jquery slider

 

[crocodile2u]

так там и используется jquery slider

Разве? Может, я че-то тут не догоняю...

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

 

[crocodile2u]

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

 

[Gremboloid]

растягивать/сжимать, цепляясь мышкой за края, так и перетаскивать, хватая за середину.

при такой постановке задачи, придется свое писать, у slider максимум две активные точки (min, max)
а в твоей их уже три min, max и range

 

[crocodile2u]

И все-таки, очень похоже на то, что у меня это получится, завтра отчитаюсь

UPD: уже получилось, завтра оформлю это добро покрасивше и в виде Jquery-плагина и дам посмотреть.

UPD2: Ну вот, можно посмотреть, что получилось. Тестировал пока тока в последнем хроме, правда, щас буду смотреть, что там с другими браузерами.

 

[crocodile2u]

Пыщ.

 

[c0dex]

При движении слайдеров, пока не отпустишь - не меняется значение, не удобно. А так неплохо)

 

[crocodile2u]

При движении слайдеров, пока не отпустишь - не меняется значение, не удобно. А так неплохо)

А, ну это надо еще обработчик на "slide" навесить, так что это не проблема.

 

[Gremboloid]

У меня:
в FF все нормально
в IE8 при попытке сместить область управление перехватывает один из краев области, второй край начинает двигаться в произвольном порядке
в Opera 10.63 правый край выбранной области двигается дискретно (скачками) см. рис.

 

[crocodile2u]

Угу, спасибо за фидбэк. В опере-то я смогу посмотреть, а вот с ИЕ проблема пока, надо виртуальную винду, что ли, поставить... Нет ни у кого готового образа винды для VirtualBox ?

 

[c0dex]

crocodile2u
пробуй playonlinux там ищи IE7 или IE8, седьмой там точно был, может сможешь запустить под вайном)

А образа нема.

 

[Mr_Max]

crocodile2u
Найс =)
"треугольнички" я б увеличил, дабы не прицеливаться =)

UPD.
под IE8 драг не работает.
при клике на ui-draggable
изменяет ближнюю границу

 

[crocodile2u]

Спасибо огромное за помощь и советы! Видимо, не раньше чем завтра уже смогу что-то поправить под другие браузеры.

Установил ИЕ7 с пом. playonlinux. Там перетаскивание диапазона работает очень криво, похоже, дело в том, что события как-то странно отлавливаются, надо еще посмотреть поглубже в код слайдера: есть ощущение, что там отлавливают mousedown, и из-за этого-то все и ведет себя так непонятно в ИЕ. Буду копать, но, если удастся договориться с начальством - просто отключу это перетаскивание для ИЕ

 

[crocodile2u]

Опера, согласно http://www.sitepoint.com/forums/showthread.php?t=705860 округляет ширину в процентах до целого процента, тогда как остальные браузеры - до ближайшего пиксела. Причем, судя по тому, что я наблюдаю в Opera DragonFly, вооружившись калькулятором - свойство "left", заданное в процентах, округляется до пиксела. Из-за этого правый край выбранного диапазона дергается, если перемещать его левый край. Засада. Может быть, из-за этого в частности в UI.Slider активные элементы такие здоровые - они могут закрывать дергающийся край в опере. Видимо, придется поступить также.

Для ИЕ понадобилось установить обработчик "mousedown" для диапазона, тогда драг заработал, но в моем ИЕ-7-wine как-то дюже дергано: везешь-везешь, с места не двигается, потом в один момент хлоп - и на месте. Неприятно, но как с этим бороться - непонятно.

 

[_sasha86_]

Зачем изобретать велосипед?
http://fastcoder.org/projects/?id=1

 

[crocodile2u]

Зачем изобретать велосипед?
http://fastcoder.org/projects/?id=1

Александр (так ведь?), пожалуйста, будьте корректны:
1. Изначально я спрашивал именно про готовое решение и был бы рад возможности ничего не писать и изобретать вообще.
2. Изготовленный слайдер - не такой уж велосипед, а скорее мягкая седушка + фонарик для готового велосипеда (Jquery.UI.Slider).
3. Для того, чтобы воспользоваться велосипедом, предложенным вами, его бы тоже пришлось допиливать - как минимум, там нету возможности задать выбираемую область диапазона, к тому же ему нужно задать длину в пикселах, тогда как ширину UI.Slider можно задать процентами.

 

[AmdY]

crocodile2u
а смотрел этот http://text.md/trackbar/ ?

 

[crocodile2u]

crocodile2u
а смотрел этот http://text.md/trackbar/ ?

Это тот же, что _sasha86_ советовал. Его тоже пришлось бы допиливать, к тому же там ширина только в пикселах.