Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Как изменить стиль элемента SELECT с помощью EasyDropDown.Js

Дата добавления: 21.09.2014 - 12:48
Добавил: Buger
Количество просмотров: 2281
Количество комментариев: 0
Размер файла: 17.7Kb
Рейтинг материала: 3.4 / 5
Как изменить стиль элемента SELECT с помощью EasyDropDown.Js
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 3.4
/
голосов 5
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>




Источник: http://ruseller.com
Добавлять комментарии могут только зарегистрированные пользователи.