ikSelect — идеальный плагин для стилизации селектов

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

    Недавно на хабре проскакивал Selectik — довольно неплохой плагин, но не без недостатков. Работа над ним, судя по GitHub, ещё идёт, но пока он не очень удобен, и его основные проблемы ещё имеют место быть.

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

    В двух словах: он умеет практически всё, что умеет стандартный селект, при этом отлично стилизируется и подстраивается под особенности реализации селектов разных браузеров. Плагин полностью копирует внешний вид родного селекта Mac OS X, но его без проблем можно стилизировать через css.

    Вот так он выглядит в закрытом виде:

    Вот так в открытом:

    Чем же он лучше остальных?


    Объем: 11KB

    Достоинства:
    • работает во всех браузерах (IE6+, FF, Opera, Chrome, Safari), в том числе в мобильных
    • автоматически подстраивает ширину
    • открывается всегда на видимую часть страницы (так называемое «умное позиционирование»), как в горизонтальном, так и в вертикальном положении
    • позволяет задавать максимальную высоту выпадающего списка
    • позволяет группировать опции (optgroup)
    • полностью управляется с клавиатуры (в т.ч. реагирует на переход Tab'ом, PgUp, PgDown, Home, End)
    • имеет подбор по первым буквам (не только по одной, но и по последующим)
    • поддерживает скролл колёсиком мышки
    • вставляется инлайново (inline-block)
    • замечательно работает с огромными списками (1000+ элементов)
    • оставляет стандартный селект при отключенном javascript
    • имеет отличный API
    Недостатки:
    • не позволяет выделять сразу несколько пунктов (multiselect)
    • не стилизирует скроллбар выпадающего списка (т.к. слишком сильно влияет на скорость работы)
    • не бегает за пивом

    Мобильные браузеры


    Плагин стилизирует само поле, но при нажатии вызывает родное поведение браузера. Протестировано на iOS (Safari) и Android (2.3 native, Firefox):

      

    В Opera mini остаются стандартные селекты, во избежание перезагрузки страницы при открытии списка. В Opera mobile работает так же, как и в настольной версии.

    Выводы

    • ikSelect только повторяет поведение стандартных селектов, и не добавляет новых функций, которые умеют некоторые другие плагины
    • несмотря на мелкие недостатки, данный плагин является лучшим из тех, которые я пока видел

    Ссылки

    Найденные баги можно оставлять в комментах, либо же на GitHub.

    P.S. Спасибо за инвайт, высланный автору плагина i10k.
    Поделиться публикацией
    Ой, у вас баннер убежал!

    Ну, и что?
    Реклама
    Комментарии 49
    • +1
      На самом деле, в макоси для выпадающих селектов выбранный пункт находится прямо под надписью:


      • +3
        На самом деле в мак оси выпадающий список может выходить за границы браузера ) Но так как скрипт ограничен окном, то я решил опустить этот момент из-за лишних вычислений и так как оно вряд ли себя оправдает в тесных рамках.
        Может быть в одной из будущих версий реализую, но пока не уверен…
        • 0
          Ну и, как мне кажется, стоит этот плагин в браузерах под макось заменять обычным селектом, поскольку ваш плагин всё же не до конца правильно работает, например разница в анимации заметна, положения селекта… :)
          • +2
            Цель этого плагина — не заменить селекты на аналог маковских ))
            А стилизовать селекты так, как дизайнер пожелает. Это и был основной толчок к написанию.
            То что он сейчас внешне повторяет маковский селект — просто как пример, не более. Просто очередной эксперимент на тему «а получится ли без картинок сделать вот так». Ну и нравится мне просто вид селектов в макоси )

            До написания этого плагина я вообще был склонен к тому, что лучше использовать стандартные селекты. В процессе разработки был очень удивлен, что не все браузеры позволяют банально открыть стандартный селект с клавиатуры. Так что теперь даже не знаю что лучше )
        • 0
          Если не понятно, что имеется ввиду, заснял гифку (1.3 Мб).
          • 0
            Я понял и тогда ) Я тщательно изучал селекты и их поведения в каждом браузере. И на основе общей картины старался сделать все как можно компактнее, но с некоторыми деталями от оригинальных браузеров.
            Но спасибо за потраченное время на запись гифки в любом случае )
            Еще раз могу сказать, что изначально не планировал включать этот функционал по разным причинам. Возможно реализую в будущем.
            На данном этапе интересует чтобы безукоризненно работало то, что уже есть.
          • 0
            В Windows 8 в метро интерфейсе — аналогично.
          • 0
            В opera mobile 12 на андроиде список с 1000 элементов вылезает за края страницы и не даёт выбрать что-то в начале списка
            • 0
              Ну и на тегре2 генерировало 3181ms, хотя это и не так важно
              • +1
                Выпадающий список с 1000 элементов это большой фейл в проектировании
              • +2
                Одной мне кажется неудобным то, что список закрывается при правом клике? Так firebug'ом его смотреть неудобно.
                • 0
                  Видимо фф так реагирует на $(document).click()… к сожалению если вешать событие на что-то другое, то на странице могут появится мертвые зоны которые не закроют селект…

                  ПС. в сафари инпект по правому клику работает )
                  • 0
                    И в хроме, соответственно, тоже. Спасибо за наводку :)
                    • 0
                      Фильтруйте кнопку в обработчике.
                  • +3
                    На днях занимался поиском подобного плагина (в том числе читал вашу предыдущую статью). В итоге, остановился на chosen:
                    harvesthq.github.com/chosen/
                      • 0
                        Поддерживаю. С небольшим напильником он становится идеальным для всяческих административных нужд – в основном, селекты с возможностью добавления вариантов
                        • НЛО прилетело и опубликовало эту надпись здесь
                          • +1
                            Chosen — это уже чуток не настоящий селектбокс. Например, мне очень хотелось бы видеть в поведении селектбокса, чтобы, когда вводишь букву он именно переходил на нужный пункт, как это делаю бравзерные селектбоксы, а не через поле ввода. Т.к. совсем не обязательно дизайнеры нарисуют поле ввода такое оригинальное как в chosen :) А вот чутка шире/выше/уже обычный дропдаун нарисовать — это всегда пожалуйста.
                          • 0
                            Классный, но пишут там про поддержку от ие9 с костылями для ие8. Как-то несерьезно.
                            В любом случае хорошо, что есть альтернатива.
                            • +1
                              Все бы хорошо, но это не «плагин для стилизации select-а». То есть, там нет даже простой возможности скрыть поле поиска и иже с ним, и сделать просто красиво оформленный select. Точнее, можно, но напильником, и не «из коробки».
                              • +1
                                А что тогда это за плагин? Чего в нем не хватает для «стилизации select-a»?
                                Простая возможность скрыть поиск есть: disable_search_threshold
                                • 0
                                  Спасибо за «disable_search_threshold».
                                  Пожалуй да, для стилизации select-а, по сути. Просто select используется не только как элемент формы, но и как навигационный элемент иногда, и для сортировки, например. Поиск был включен по-умолчанию. На мой взгляд, он должен был бы быть дополнительной (вторичной) фичей.

                                  Но неважно — как компонент, Chosen — один из лучших, хотя и тяжеловат для расширения. Единственное, что несколько напрягает — то, что исходник на CoffeeScript, я бы (как и многие) предпочел чистый JS, но тут хозяин-барин.
                            • –1
                              В Opera 11.61 стрелки сливаются в ромб.
                              • 0
                                Opera 11.61 — все нормально… возможно проблема в винде…
                                Еще раз повторюсь, что реализованный вид селекта — просто пример… Никто не мешает прописать свой код селекту и в использовать кроссбраузерные и кросОСные картинки для стрелок )
                              • +1
                                Полностью не рабочее поведение при попытке выбора элемента с помощью Tab'a.
                                Так же не теряет фокус, если в открытом состоянии нажать Tab.
                                + Если элемент теряет фокус(кликнули за пределами страницы браузера) он не закрывается
                                • 0
                                  1. Подробнее про первое? Только что проверил в сафари и фф — прекрасно все выбирается с помощью Tab.
                                  2. Незакрытие селекта по Tab позаимствовал у сафари. Мне показалось это правильнее. Хотя стоит поправить это поведение для других браузеров. Сделаю.
                                  3. Ээээ… может быть я что-то не знаю о яваскрипт, но вроде бы никаких событий не передается при клике за браузером…
                                  • 0
                                    1. Пытался пройти табом по вашей демо-странице в Opera 11.61 и IE 9.
                                    Фокус останавливается на элементе, пытаюсь нажать верх-вниз, как результат, ничего в select не изменяется.

                                    2. Отличное поведение. А главное взятое у самого популярного браузера в мире.

                                    3. Похоже, что не знаете: blur, focusout
                                    www.w3.org/TR/DOM-Level-3-Events/#events-focusevent-doc-focus
                                    • 0
                                      Извините, если я больно резко высказываюсь.
                                      Виноваты не вы, а автор топика, т.к. указал в заголовке «идеальный»
                                      • 0
                                        1. Ага, выловил баг, спасибо… на каком-то этапе сломал эту фичу видимо… сам же тестил открывая по пробелу селект )

                                        2. У предпочитаемого браузера )))

                                        3. My bad. Был уверен, что они стреляют только на клики в пределах документа. Исправлю.

                                        Итог: 3 из 3 указанных багов исправлю ))
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    • +14
                                      «Идеальный» — по-моему слишком громко
                                      • –9
                                        Мне не нравятся стилизованные селекты. В моей Опере стандартные элементы управления смотрятся ровно и аккуратно. Если в вашем/у дизайнера Хроме/Фаерфоксе некрасивые системные селекты, это ваши проблемы, а не повод уродовать сайт. Поставьте уже себе нормальный браузер, что ли.

                                        Плюс, он еще и требует тяжеленный jQuery… пользователи ИЕ и всяких там айфонов будут плакать горючими слезами.

                                        • +3
                                          >> «Поставьте уже себе нормальный браузер», «пользователи ИЕ», «всяких там айфонов»

                                          troll detected!
                                        • +1
                                          я вас обожаю, НО не правильно обрабатывается сочетание shift+tab, которое должно переключать на предыдущий элемент, а не на последующий. я так понимаю, это событие просто не обрабатывается.

                                          тем не менее респект вам и уважуха!
                                          • +3
                                            Спасибо )

                                            Забыл про shift+tab ) сделаю обязательно )
                                          • 0
                                            Opera 11.61.
                                            Если несколько раз добавить по 1000 пунктов, то происходят баги с позицией на экране плюс вылезает всей высотой, а не частью.
                                            Так же как мелкий баг. Ему очень не нравится следующая ситуация: несколько раз нажал добавлять 1000 позиций, и в это время кликнул на селекте, он подвесил страницу.
                                            • 0
                                              Спасибо за багрепорт.

                                              В фф удалось повторить баг с высотой, исправлю.

                                              На счет подвешивания страницы пока ничего сказать не могу.
                                            • +1
                                              • +1
                                                В общем, суть в том, что в хроме во многих случаях добавляется горизонтальный скролл
                                                • +1
                                                  Спасибо, пофикшу. )
                                              • 0
                                                Вот тут: uniformjs.com похожая реализация, плюс есть загрузка файлов, чекбоксы, радиобатоны, несколько тем и возможность быстрой стилизации всей формы.
                                                • 0
                                                  Вообще ничего похожего, у них тупо заменяется вид селекта, но при клике вызывается стандартный системный дропдаун
                                                • –1
                                                  Ага, еще в Хроме 17.0.963.78 m:
                                                  • 0
                                                    Нативный контрол открывается по mousedown, этот — по click
                                                    • 0
                                                      Я может чего-то не понял, но почему он не меняет сам селект при смене значений??
                                                      Вот я открываю пример на гитхабе, щелкаю по списку, а атрибут селектед у родного селекта не меняется.
                                                      • 0
                                                        Отключите яваскрипт и попробуйте переключить нативный селект, обращая внимание на то как «меняется» атрибут селектед )
                                                      • 0
                                                        Обновил плагин, постарался все исправить.

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

                                                        Вроде ниче не пропустил.
                                                        • 0
                                                          Выглядит шикарно)

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

                                                          Самое читаемое