Сегодня мы хотим поделиться с вами несколькими простыми эффектами для выпадающих списков. Идея состоит в преобразовалии нормального select-а в нечто более привлекательное при помощи jQuery-плагина. Раскрытие пунктов списка будет происходить при помощи transition, а параметры могут быть настроены таким образом, чтобы достигать уникальных эффектов.
После прошлого замечательного примера с раскрывающимися списками, мы хотели сделать этот вариант предельно простым для создания пользовательского списка из обычного select-а (без множественного выбора). Таким образом, мы написали этой небольшой плагин, который позволит легко создавать пользовательские, стильные, раскрывающиеся списки.
Обратите внимание, что CSS-преобразования и переходы работают только в современных браузерах.
С отключенным JavaScript будет просто показан стандартный select.
Шрифт иконок был создан при помощи IcoMoon.
Итак, мы начнем с создания разметки для списка, например:
<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 и options трансформируются в следующую структуру:
<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, // initial stack effect stack : true, // delay between each option animation delay : 0, // random angle and positions for the options random : false, // rotated [right || left || false]: the options will be rotated to the right side or left side // make sure to set the transform-origin in the style sheet rotated : false, // effect to slide in the options // value is the margin to start with slidingIn : false
Исходники:
[think=http://www.kolobok.us/smiles/standart/yahoo.gif] 😎 Надеюсь, вам понравился этот небольшой плагин![/think]
- Подпись автора