- PVSM.RU - https://www.pvsm.ru -

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

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'

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

Плагин scrollbarJS

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

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

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

Автор: decadent

Источник [4]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/26867

Ссылки в тексте:

[1] Исходники находятся здесь.: https://github.com/git-decadent/selectimus

[2] Демо-страница с описанием здесь.: http://188.127.227.198:3000/

[3] Исходники находятся здесь.: https://github.com/.git-decadent/scrollbarJS

[4] Источник: http://habrahabr.ru/post/168973/