decadent Feb 11 2013 at 14:59

Замена стандартных селектов в браузере

2 min

13K

JavaScript*jQuery*

-3

Comments 62

Richard_Ferlow Feb 11 2013 at 15:02

Лучше chosen пока ничего не видел. Смысл менять стандартные на что-то если они выглядят не лучше?

decadent Feb 11 2013 at 15:11

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

onthefly Feb 11 2013 at 16:59

интересно узнать, по каким причинам дизайнеру всё это потребовалось

decadent Feb 12 2013 at 14:17

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

onthefly Feb 12 2013 at 14:43

Наверняка, когда ваш дизайнер ставил перед вами задачу переопределить стандартный вид селектов во всех браузерах, он руководствовался не субъективным чувством прекрасного, не личной прихотью, а некими серьёзными инженерными причинами. Хотелось бы узнать, что это за причины.

decadent Feb 12 2013 at 15:58

Складывается впечатление, что он вам не угодил. Думаю, он руководстовался чувством прекрасного, он же дизайнер)

onthefly Feb 12 2013 at 16:05

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

Но мотивацию вашего работника я понял, спасибо за ответ.

TNK Feb 20 2013 at 16:06

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

leshaogonkov Feb 11 2013 at 15:19

C ajax chozen довольно уныло работает, мучались мучались с ним, в итоге написали своё решение на основе UI autocomplete

RiderSx Feb 11 2013 at 16:12

Вместо chosen лучше использовать select2, ИМХО :)

SeVit Feb 11 2013 at 16:31

Поддерживаю, Select2 базировался на Chosen, он как работа над ошибками и намного предпочтительнее.

decadent Feb 11 2013 at 16:40

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

frol Feb 11 2013 at 16:43

Спасибо за select2, не знал.
Есть такой вопрос, может кто-нибудь в этой ветке знает, как заставить chosen или select2 отзываться на Page Up/Down и Home/End? В chosen предлагают решать это циклом перебирая по одной строчке, для Page Up/Down ещё чёрт с ним, но с End — это провал… :)

toptalo Feb 11 2013 at 17:00

Не подскажете у chozen или select2 можно отключить поле поиска?

RiderSx Feb 11 2013 at 17:19

В API ничего по этому поводу я не нашел, но можно решить «в лоб» :)

.select2-search {
  display: none;
}

toptalo Feb 11 2013 at 17:46

тогда перестает работать навигация стрелками, жаль что нет такой настройки

RiderSx Feb 11 2013 at 19:35

Тогда вот так (проверил, работает навигация стрелками):

.select2-search {
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

Richard_Ferlow Feb 12 2013 at 07:36

disable_search_threshold: 10

с такой опцией поле поиска будет появляться если элементов больше 10

oENDark Feb 11 2013 at 15:05

Opera 12.14 Win7 — нету прокрутки колёсиком у самого первого примера.

ertaquo Feb 11 2013 at 15:07

Chrome 24, Ubuntu 12.10 — нет прокрутки колесиком ни в одном примере :-)

Dreddik Feb 11 2013 at 15:05

У вас не скроллится

decadent Feb 11 2013 at 15:12

Скроллинг в разработке. Теперь вижу, что это важный функционал.

Dreddik Feb 11 2013 at 15:14

Хех. Это первостепенный функционал в списках

anyxem Feb 11 2013 at 15:40

Программист с самого начала знает обо всех багах и недоработках программы, но не исправляет их, надеясь, что пользователи не додумаются вызвать эти ошибки. (с) народная мудрость

Igogo2012 Feb 11 2013 at 15:15

Согласен с Richard_Ferlow!
Так же к вашим селектам нельзя прикрутить события, например на onChange, а такое часто нужно на реальной практике…

decadent Feb 11 2013 at 15:20

Да. Вот это серъезный просчет с событиями. Спасибо.

mgn Feb 11 2013 at 15:31

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

NeX Feb 11 2013 at 15:45

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

decadent Feb 11 2013 at 15:51

Реализую) Баги поправимы. Менять контролы или не менять — каждый решает сам в зависимости от поставленных задач.

marcus Feb 11 2013 at 15:46

Не забудьте также про фокус и поддержку клавиатуры. Элементы списков можно выбирать, набрав название элемента с клавиатуры, развернуть список и гулять по пунктам можно стрелочками, а на сам список можно попасть по табу.

А вообще, не тратьте время на чепуху.

infinius Feb 11 2013 at 16:01

jquery.core-ui-select, пользуюсь с момента прочтения статьи.
Стилизуется оттуда, откуда должен стилизоваться (из CSS, ну). Обрабатывает скролл и клавиатуру. На айосах выключается.

Theo_from_Sed Feb 11 2013 at 16:30

Недавно довелось пользоваться uniformjs — хорошая реализация, заменяет все элементы формы, IE7+ поддержка.

i10k Feb 11 2013 at 16:37

OS X, Safari:
1. По табу селект не выбрать;
2. пробел при открытом селекте прокручивает страницу;
3. отстутствие эвентов/колбэков;
4. отстутствие API;
5. нет поддержки optgroup

Да и вообще сам плагин сомнительного качества. Не предлагаю посмотреть в сторону моего ikSelect.

decadent Feb 11 2013 at 16:41

Что значит сомнительного качества?)

i10k Feb 11 2013 at 16:59

Пробежался глазами. Не понравилось:
1. Структура. Стоило прибегнуть хоть к какому-то паттерну.
2. В коде определен метод «extend». Чем не угодил $.extend?
3. Никаких namespace-ов у event-ов.
4. Ужасная производительность при большом количестве option-ов, судя по коду. Из каждого option создается объект, который аппендится к списку.
и тд

decadent Feb 11 2013 at 17:04

2. В коде определен метод «extend». Чем не угодил $.extend?

Наверное, абсолютно другим функционалом)

4. Ужасная производительность при большом количестве option-ов, судя по коду.

Я бы не судил о производительности по коду. Тем более поверхностно.

i10k Feb 11 2013 at 18:02

Наверное, абсолютно другим функционалом)

По-моему, $.extend(CreateClone.prototype, SelectToggle.prototype) вполне справился бы в данном случае.

Я бы не судил о производительности по коду. Тем более поверхностно.

Я бы не судил, если б не делал свой плагин для селектов и не столкнулся бы с данной проблемой.

decadent Feb 11 2013 at 21:22

С такой проблемой не столкнулся. Производительность на уровне при большом количестве селектов.

i10k Feb 11 2013 at 23:17

Я не про количество select-ов, а про создание списка ul>li из, например, тысячи option-ов.

decadent Feb 12 2013 at 16:01

Никогда не сталкивался с селектом из 1000 option-ов. C 300-ами не тормозит — проверил.

Brankub Feb 11 2013 at 17:20

Посмотрите Selectik.
Были исправлены баги, реализован весь стандартный функционал селекта, API, преопределение методов. Весит меньше.

tyderh Feb 11 2013 at 17:56

Там, к примеру, того же поиска по первой букве тоже нет

Brankub Feb 11 2013 at 18:03

Готов не согласиться. Может вы нашли баг — тогда прошу создать issue.

tyderh Feb 11 2013 at 18:08

done

Brankub Feb 11 2013 at 18:15

Спасибо. Ответил вам там же. «Это не баг, а фича». В действительности абсолютно нормальное поведение стандартного селекта.

i10k Feb 11 2013 at 18:03

В Safari на OS X как выскакивал стандартный дропдаун при нажатии на стрелку, так и выскакивает. )

Brankub Feb 11 2013 at 18:05

Будет возможность протестировать снова в OS X — займусь этим багом.

Brankub Feb 12 2013 at 16:21

Убрать стандартное поведение селекта в Safari на Mac'е, к сожалению, не возможно. С учетом поведения, которое использует сейчас Selectik.
Но есть маленький костыль. Подробнее можете ознакомится здесь.

copyhold Feb 11 2013 at 18:06

А есть ли хоть один, который может следить за изменением состояния селекта и апдейтиться соответственно.
А есть тут проект, который грузит данные в селект с третьего сервера. Причём влезть в этот процесс нельзя (чужой скрипт).

Brankub Feb 11 2013 at 18:11

Изменения состояния селекта:
1. Если вы изменяете структуру, то Selectik автоматически это не делает. Надо вызывать функцию плагина.
2. Если изменяется выбранный элемент — да.

Второй вопрос неясен.

copyhold Feb 11 2013 at 18:20

Второго вопроса нет, просто по условию задачи невозможно определить когда исходный селект полностью построится.
А ведь он может еще и поменяться потом динамически.
Решение для такого есть?

Brankub Feb 11 2013 at 18:27

Костылей придумать можно много, а вот решение одно — «влезть в этот процесс», в который, по вашим словам, этого сделать нельзя.

DenisZ Feb 12 2013 at 02:32

github.com/denis-zavgorodny/jClever

Функционал с слежением за DOM только недавно выкатили.

dshster Feb 12 2013 at 09:58

Вот всех кастомных селектах есть один недостаток. Представьте такое поведение — пользователь прижимает мышку на селекте, открывается список, не отпуская мышку тянет курсор вниз, выбирая нужный пункт (срабатывает скроллинг длинного списка), по достижению нужного пункта пользователь отпускает мышку и происходит выбор. Т.е. как в выпадающем меню.

При повторении привычных действий с кастомным селектом пользователь испытывает к. д. Частично (скроллинг по списку при событии drag) реализован в Select2.

«Прижал — Потянул — Отпустил» превращается в «Щелкнул — Прокрутил — Выбрал — Щелкнул», это если прокрутка колесом работает, в противном случае все еще сложнее. Не зря же стандартные контролы продумывают до мелочей под различные поведения пользователя.

Brankub Feb 12 2013 at 14:56

Вы высказали очень интересное замечание. Постараюсь подумать, как это можно реализовать.

Brankub Feb 12 2013 at 16:22

Готово. Прошу протестировать, если вас еще инетресует.

dshster Feb 12 2013 at 18:24

Да вы крут! Только скроллинг не работает. FX 18

Brankub Feb 12 2013 at 18:32

Firefox 18.0.2/Windows 7 — при зажатой левой кнопке с помощью скролла(мыши) работает.
Можете расписать ваши действия? Возможно в личку.

dshster Feb 12 2013 at 18:35

Нет, нет. Скролл должен срабатывать при перемещении с последнего элемента за нижнюю границу выпадающей области при зажатой кнопке мыши! И так же для верхнего элемента. Поиграйтесь со стандартным элементом и все станет ясно. Колёсико в данном случае совсем не участвует.

Brankub Feb 12 2013 at 20:27

Сделано. Пользуйтесь (тестируйте).
Правки внес, так как это действительно нативное поведение селекта.
Спасибо за помощь.

onthefly Feb 20 2013 at 22:25

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

Brankub Feb 22 2013 at 15:06

Данная возможность была перекрыта последним коммитом. Исправлено.