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, на универсальную во всех браузерах. Сейчас работает только с вертикальным контентом. В разработке также возможность добавления опций по настройке внешнего вида полосы прокрутки.
Возможно кому-нибудь пригодится такая реализация.
Автор: decadent
