Простые эффекты для выпадающего списка

В данном уроке мы установим для выпадающего списка простые визуальные эффекты. Идея заключается в трансформации обычного элемента select в эффектный пункт интерфейса с помощью плагина jQuery. Набор опций и параметров позволяет получить различные варианты уникальных эффектов.

Небольшой плагин подключается к обычному выпадающему списку и позволяет использовать пользовательские стили для него. Полученную структуру легко модифицировать для простых визуальных эффектов.

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

Без JavaScript будет выводиться обычный выпадающий список.

В качестве основы демонстрации воспользуемся элементом select:

					<select id="cd-dropdown" class="cd-select">
						<option value="-1" selected>Выберите любимого зверя</option>
						<option value="1" class="icon-monkey">Обезьяна</option>
						<option value="2" class="icon-bear">Медведь</option>
						<option value="3" class="icon-squirrel">Белка</option>
						<option value="4" class="icon-elephant">Слон</option>
					</select>

Плагин подключается просто:

$( '#cd-dropdown' ).dropdown();

Элемент select трансформируется в следующую структуру:

<div class="cd-dropdown">
    <span>Выберите любимого зверя</span>
    <input type="hidden" name="cd-dropdown">
    <ul>
        <li data-value="1"><span class="icon-monkey">Обезьяна</span></li>
        <li data-value="2"><span class="icon-bear">Медведь</span></li>
        <li data-value="3"><span class="icon-squirrel">Белка</span></li>
        <li data-value="4"><span class="icon-elephant">Слон</span></li>
    </ul>
</div>

При нажатии на элементе span к его родителю применяется класс  “cd-active”. При выборе опции, соответствующий элемент span вставляется на первую позицию.

 

Для плагина доступны следующие опции:

speed : 300,
easing : 'ease',
gutter : 0,
 
// Эффект складывания в стопку
stack : true,
 
// Задержка между анимациями пунктов
delay : 0,
 
// Случайный угол и позиционирование для опций
random : false,
 
// rotated [right || left || false]: опции будут вращаться вправо или влево
// Нужно установить свойство transform-origin в таблице стилей
rotated : false,
 
// Эффект выскальзывания
// Значение - ширина поля для начала движения
slidingIn : false

Основные стили определены в файле common.css, а специфические правила определяются для каждой демонстрации в файлах styleN.css.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/8MCyLcuVdiE/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Простые эффекты для выпадающего списка | | 2012-12-02 10:25:38 | | Статьи Web-мастеру | | В данном уроке мы установим для выпадающего списка простые визуальные эффекты. Идея заключается в трансформации обычного элемента select в эффектный пункт интерфейса с помощью плагина jQuery. Набор | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: