Форма входа

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

    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

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

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

    Дата добавления: 21.09.2014 - 12:48
    Добавил: Buger
    Количество просмотров: 4.5k
    Количество комментариев: 0
    Размер файла: 17.7 Kb
    Рейтинг материала: 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
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: