Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Как изменить стиль элемента SELECT с помощью EasyDropDown.Js
Дата добавления: 21.09.2014 - 12:48
Категория: Уроки / Литература / Пособия
Добавил: Buger
Количество просмотров: 4016
Количество комментариев: 0
Размер файла: 17.7 Kb
Рейтинг материала: 3.4 / 5
БЕСПЛАТНО
рейтинг
3.4
/
голосов
5
SELECT - это HTML элемент, который представляет собой выпадающий список. Однако стандартный вид данного тега может не вписываться в ваш дизайн. Сегодня мы покажем как это исправить.
Для оформления элемента select одного CSS недостаточно. Представляем вам jQuery плагин EasyDropDown.js, который поможет нам в этой задаче.
EasyDropDown.js с лёгкостью придаёт элементу select особый стиль, включая некоторые фичи. После преобразования, SELECT будет доступен с клавиатуры. Так же при большом количестве вложенных опций, в контейнере появится скролл.
Установка
Скачайте архив.
Для установки EasyDropDown, подключите jQuery и сам плагин:
Подключите CSS файл в разделе head:
Если вы захотите применить другую тему оформления, не забудьте скопировать CSS файл в папку проекта.
Применяем стиль к Select
При использовании EasyDropDown.js, ваша разметка остаётся ясной и интуитивно-понятной. Вам нужно просто добавить обычный элемент select. Вы так же можете отключать данный элемент, присваивать лэйбл и обозначить элемент, который должен быть выбран по умолчанию.
Для стилизации элемента достаточно приписать к нему класс dropdown. Вот и пример:
Вот и всё, больше ничего вам не нужно. Теперь ваш элемент SELECT будет более симпатичным.
Если вам нужно изначально выделить какой-то элемент, воспользуйтесь атрибутом selected. В данном случае мы не рекомендуем использовать лэйбл, т.к. отображение может немного нарушиться.
Вы так же можете отключить элемент, добавив атрибут disabled:
Выбор темы
В комплекте с плагином EasyDropDown.js поставляется 2 стилевые темы: Metro и Flat. Для того чтобы их подключить, воспользуйтесь HTML5 атрибутом data-attribute.
Для применения другой темы, внутри элемента SELECT напишите data-settings='{"wrapperClass":"theme-name"}'. Параметр theme-name может принимать значения: metro или flat. Примеры:
Источник: http://ruseller.com
Для оформления элемента 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>
<script src="js/jquery.easydropdown.js" type="text/javascript"></script>
Подключите CSS файл в разделе head:
Код
<head>
..
<link rel="stylesheet" type="text/css" href="themes/easydropdown.css"/>
..
</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>
<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>
...
<option value="2" selected>Option 2</option>
...
</select>
Вы так же можете отключить элемент, добавив атрибут disabled:
Код
<select class="dropdown" disabled>
...
</select>
...
</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>
...
</select>
Источник: http://ruseller.com
Поделись с друзьями:
