Pull to refresh

Обзор jQuery-плагинов для стилизации селектов

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

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

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

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



Достоинства:
  • работает на всех устройствах, в том числе на мобильных телефонах
  • автоматически подстраивает ширину
  • без проблем контролируется с помощью jQuery
  • открывается всегда на видимую часть страницы (так называемое «умное позиционирование»)
  • сам определяет оптимальную высоту для выпадающего списка
  • позволяет группировать опции
  • позволяет выделять сразу несколько пунктов (если, конечно, прописать необходимые атрибуты)
  • реагирует на переход Tab'ом
  • имеет подбор по первой букве
  • поддерживает скролл колёсиком мышки
Недостатки:
  • выглядят во всех браузерах по разному
  • не имеет возможности быть нормально стилизованным
Посмотрим что же могут остальные
Total votes 108: ↑91 and ↓17 +74
Views 132K
Comments 69

Selectik — стильные селекты

jQuery *
Sandbox
Веб-дизайнеры любят стилизировать стандартные элементы форм. Потом эти элементы приходиться реализовывать нам — верстальщикам.

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

Естественно, после всего этого я решил изобрести свой велосипед.

Пример разработан без дополнительных картинок с помощью CSS3. Демо-страница с песочницей здесь.
Читать дальше →
Total votes 52: ↑49 and ↓3 +46
Views 12K
Comments 74

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

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

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

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

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

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

Вот так в открытом:
Чем же он лучше остальных?
Total votes 59: ↑49 and ↓10 +39
Views 23K
Comments 49