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

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

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

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

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

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

      Вот так в открытом:
      Чем же он лучше остальных?
    • Обзор jQuery-плагинов для стилизации селектов

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

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

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

        Стандартный select



        Достоинства:
        • работает на всех устройствах, в том числе на мобильных телефонах
        • автоматически подстраивает ширину
        • без проблем контролируется с помощью jQuery
        • открывается всегда на видимую часть страницы (так называемое «умное позиционирование»)
        • сам определяет оптимальную высоту для выпадающего списка
        • позволяет группировать опции
        • позволяет выделять сразу несколько пунктов (если, конечно, прописать необходимые атрибуты)
        • реагирует на переход Tab'ом
        • имеет подбор по первой букве
        • поддерживает скролл колёсиком мышки
        Недостатки:
        • выглядят во всех браузерах по разному
        • не имеет возможности быть нормально стилизованным
        Посмотрим что же могут остальные