Замена стандартных селектов в браузере

от автора

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

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

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

ссылка на оригинал статьи http://habrahabr.ru/post/168973/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *