Selectimus


На текущем проекте некоторое время назад стала задача по унификации селектов во всех браузерах. Нужно было изменить их так, чтобы при одинаковом отображении они внешне оставались близкими к стандартным но при этом имели возможность гибкой настройки средствами CSS. Поискав готовые библиотеки, на тот момент ничего подходящего не нашел и решил сделать свой. Взял за отправную точку дизайн близкий к стандартному, плюс замена скроллбара, со стандартного системного на свой, также одинаковый во всех браузерах. Реализован скрипт в виде jQuery плагина. Требуемая версия jQuery – 1.5+.

Механизм работы такой:

  • Стандартный селект полностью скрывается
  • На его месте создается маркированный список, который заполняется элементами списка c атрибутом value, в котором хранится номер элемента option из селекта. Тем самым при клике на li, в соответствии с параметром в value, в скрытом селекте выбирается option.
  • В том случае, если содержимое псевдоселекта больше, чем заданная видима область, то к списку добавляется скроллбар (так же jQuery плагин ScrollBar.js).
  • Внешний вид скроллбара можно поменять в файле стилей selectimus.css, там же можно поменять изображение кнопок, для прокрутки вверх и вниз. (Опции для оформления скроллбара в разработке).


Возможности плагина:

  • Максимальная приближенность к стандартному, но одинаковому во всех браузерах, селекту, по умолчанию.
  • Стилизация селектов с помощью css. Параметр style (Object) передается при инициализации.
  • Дополнительная настройка с помощью добавления ширины, высоты и установка количества строк развернутого списка селекта.
  • Навигация с помощью клавиатуры.


Инициализация плагина:
	$([elemenet]).selectimus([style] [, options])


При инициализации плагина, если не переданы дополнительные параметры стилей, применяются стили по-умолчанию:

  • color: '#000',
  • background: '#FFF',
  • color_up: '#FFF',
  • background_up: '#7EA0FA',
  • display: 'inline-block',
  • 'border-width': '1px',
  • 'border-style': 'solid',
  • 'border-color': '#b6b6b6',
  • 'border-radius': '5px',
  • margin: '3px 0',
  • position: 'relative',
  • overflow: 'visible'


Исходники находятся здесь.
Демо-страница с описанием здесь.

Плагин scrollbarJS


Заменяет стандартную полосу прокрутки в элементах на странице, к которым применяется свойство overflow: hidden, на универсальную во всех браузерах. Сейчас работает только с вертикальным контентом. В разработке также возможность добавления опций по настройке внешнего вида полосы прокрутки.

Исходники находятся здесь.

Возможно кому-нибудь пригодится такая реализация.

UPD: Спасибо всем за комментарии. Буду доделывать недоработки)