Меняем стиль элемента SELECT с помощью EasyDropDown.Js

demosourse

SELECT - это HTML элемент, который представляет собой выпадающий список. Однако стандартный вид данного тега может не вписываться в ваш дизайн. Сегодня мы покажем как это исправить.

Для оформления элемента select одного CSS недостаточно. Представляем вам jQuery плагин EasyDropDown.js, который поможет нам в этой задаче.

EasyDropDown.js с лёгкостью придаёт элементу select особый стиль, включая некоторые фичи. После преобразования, SELECT будет доступен с клавиатуры. Так же при большом количестве вложенных опций, в контейнере появится скролл.

Установка

Для установки EasyDropDown, подключите jQuery. Затем подключите сам плагин (найти его можно тут):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.easydropdown.js" type="text/javascript"></script>

Подключите CSS файл в разделе head:

<head>
..
  <link rel="stylesheet" type="text/css" href="themes/easydropdown.css"/>
..
</head>

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

Применяем стиль к Select

При использовании EasyDropDown.js, ваша разметка остаётся ясной и интуитивно-понятной. Вам нужно просто добавить обычный элемент select. Вы так же можете отключать данный элемент, присваивать лэйбл и обозначить элемент, который должен быть выбран по умолчанию.

Для стилизации элемента достаточно приписать к нему класс dropdown. Вот и пример:

<select class="dropdown">
	<option value="" class="label">Setting</option>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	<option value="4">Option 4</option>
	<option value="5">Option 5</option>
</select>

Вот и всё, больше ничего вам не нужно. Теперь ваш элемент SELECT будет более симпатичным.

Если вам нужно изначально выделить какой-то элемент, воспользуйтесь атрибутом selected. В данном случае мы не рекомендуем использовать лэйбл, т.к. отображение может немного нарушиться.

<select class="dropdown">
	...
	<option value="2" selected>Option 2</option>
	...
</select>

Вы так же можете отключить элемент, добавив атрибут disabled:

<select class="dropdown" disabled>
...
</select>

Выбор темы

В комплекте с плагином EasyDropDown.js поставляется 2 стилевые темы: Metro и Flat. Для того чтобы их подключить, воспользуйтесь HTML5 атрибутом data-attribute.

Для применения другой темы, внутри элемента SELECT напишите data-settings='{"wrapperClass":"theme-name"}'. Параметр theme-name может принимать значения: metro или flat. Примеры:

<select class="dropdown" data-settings='{"wrapperClass":"metro"}'>
...
</select>

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.hongkiat.com/blog/style-select-with-easydropdown-js/
Перевел: Станислав Протасевич
Урок создан: 16 Сентября 2014
Просмотров: 39476
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^