Меню
Что нового?

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

crocodile2u

crocodile2u

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

Возможно, кто-то знает готовый компонент (плагин для jquery - идеальный вариант) ? Не найдется - буду писать сам :)
 
Gremboloid написал(а):
так там и используется jquery slider
Нажмите для раскрытия...
Разве? Может, я че-то тут не догоняю...

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

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

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

Вложения

  • ari.zip
    ari.zip
    5 KB · Просмотры: 42
При движении слайдеров, пока не отпустишь - не меняется значение, не удобно. А так неплохо)
 
У меня:
в FF все нормально
в IE8 при попытке сместить область управление перехватывает один из краев области, второй край начинает двигаться в произвольном порядке
в Opera 10.63 правый край выбранной области двигается дискретно (скачками) см. рис.
 

Вложения

  • Безымянный.JPG
    Безымянный.JPG
    1,7 KB · Просмотры: 21
Угу, спасибо за фидбэк. В опере-то я смогу посмотреть, а вот с ИЕ проблема пока, надо виртуальную винду, что ли, поставить... Нет ни у кого готового образа винды для VirtualBox ?
 
crocodile2u
пробуй playonlinux там ищи IE7 или IE8, седьмой там точно был, может сможешь запустить под вайном)

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

UPD.
под IE8 драг не работает.
при клике на ui-draggable
изменяет ближнюю границу
 
Спасибо огромное за помощь и советы! Видимо, не раньше чем завтра уже смогу что-то поправить под другие браузеры.

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

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

Вложения

_sasha86_ написал(а):
Зачем изобретать велосипед?
http://fastcoder.org/projects/?id=1
Нажмите для раскрытия...

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