Lecaw

Учимся создавать Web-сайты

Foundation для начинающих: Кнопки и выпадающие списки \ Создание выпадающего списка

June 26, 2013
CSS
347hits

В этой части "Foundation для начинающих" мы будем работать с кнопками и создадим выпадающий список, при помощи плагина “Clearing”.

 

Серия статей Foundation для начинающих:

Кнопки

Foundation имеет солидный набор кнопок, которые очень легко установить на свой сайт. Просто добавьте класс ‘button’ к любому элементу Anchor, input, div, или button, чтобы превратить его в кнопку в стиле Foundation. Так создается стандартная кнопка, но есть широкий спектр различных стилей и типов кнопок, которые вы можете использовать на своем проекте. Вот небольшой пример:

<!-- Классы размеров -->
<a class="button" href="#">Default Button</a>
<a class="tiny button" href="#">Tiny Button</a>
<a class="small button" href="#">Small Button</a>
<a class="large button" href="#">Large Button</a>
<!-- Классы цвета -->
<a class="button secondary" href="#">Secondary Button</a>
<a class="button success" href="#">Success Button</a>
<a class="button alert" href="#">Alert Button</a>
<!-- Классы радиуса -->
<a class="button radius" href="#">Radius Button</a>
<a class="button round" href="#">Round Button</a>
<!-- Класс отключения -->
<a class="button disabled" href="#">Disabled Button</a>

Этот пример демонстрирует все предустановленные размеры, стили и состояния. Каждый из этих примеров довольно гибок; все предварительные установки могут быть переопределены с пользовательскими стилями, это означает, что вы можете не устанавливать все кнопки с нуля.

Кнопки используют цепочку классов, для достижения различных стилей. Например кнопка ‘button’ имеет размер ‘small’, цвет ‘success’ и радиус ‘round’. Вы можете также отключить любую кнопку, добавив класс ‘disabled’.

Группировка кнопок

Основные кнопки достаточно просты в реализации, но и создание группы кнопок столь же легко. Они используют простую структуру списка:

<ul class="button-group">
    <li><a class="small button" href="#">Button 1</a></li>
    <li><a class="small button" href="#">Button 2</a></li>
    <li><a class="small button" href="#">Button 3</a></li>
</ul>

Это создаст стандартную группу из трех кнопок, однако вы можете добавить классы радиуса и классы для управления шириной ‘even-2’, ‘even-3’ вплоть до ‘even-8’.. Эти классы ширины используются для заполнения свободного пространства с кнопками и используются наилучшим образом, когда число в классе соответствует количеству используемых кнопок. Например, если у вас было четыре кнопки, ‘even-4’ будет лучшим выбором.

Панель кнопок

Панель кнопок может быть описана как группа нескольких групп кнопок. Возьмите DIV, добавьте class="button-bar" и разместите в нем столько групп кнопок сколько захотите. Вот пример:

<div class="button-bar">
<ul class="button-group">
    <li><a class="small button" href="#">Button 1</a></li>
    <li><a class="small button" href="#">Button 2</a></li>
    <li><a class="small button" href="#">Button 3</a></li>
</ul>
<ul class="button-group">
    <li><a class="small button" href="#">Button 1</a></li>
    <li><a class="small button" href="#">Button 2</a></li>
    <li><a class="small button" href="#">Button 3</a></li>
</ul>
</div>

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

Создание выпадающего списка

В последней версии Foundation был представлен новый JavaScript плагин, который помогает в создании выпадающих списков. Для этого добавьте класс ‘dropdown’ к своей кнопки с добавлением пользовательского атрибута, а именно ‘data-dropdown’.

После этого неупорядоченный список, содержащий ID соответствующий вашему data-dropdown, например:

<a class="button dropdown" href="#" data-dropdown="drop1">Dropdown Button</a>
</pre>
<ul class="f-dropdown" id="drop1">
    <li><a href="#">This is a link</a></li>
    <li><a href="#">This is another</a></li>
    <li><a href="#">Yet another</a></li>
</ul>

Важно также отметить, что класс ‘f-dropdown’ на ul очень важен, так что не забудьте добавить его.

Разделитель

Заключительный уровень гибкости, является опцией разделения в Ваших кнопках. Вы можете использовать это, чтобы указать наличие выпадающего списка. Добавьте разделитель на свою кнопку, используя класс ‘split’ и элемент span, который должен иметь такой же атрибут ‘data-dropdown’, который мы использовали ранее в нашем выпадающем списке.

<a class="button dropdown" href="#" data-dropdown="drop1">Dropdown Button </a>
</pre>
<ul class="f-dropdown" id="drop1" data-dropdown-content="">
    <li><a href="#">This is a link</a></li>
    <li><a href="#">This is another</a></li>
    <li><a href="#">Yet another</a></li>
</ul>
<pre>

В данном плагине, есть только одна опция - определение имени класса применяется с выпадающим списком, когда он открыт:

$(document).foundation('dropdown', {
  activeClass: 'open'
});

Плагин Clearing

Clearing - супер быстрый плагин лайтбокса.
К настоящему времени, Вы будете знакомы с тем, как Foundation работает со структурными списками, а они созданы на основе данного плагина. Создайте неупорядоченный список с некоторым содержанием в каждом элементе списка. Добавьте класс ‘clearing-thumbs’ к ul, а также пустой пользовательский атрибут ‘data-clearing’.

</pre>
<ul class="clearing-thumbs" data-clearing="">
    <li><a href="#"><img alt="" src="/path/to/your/img-th" /></a></li>
    <li><a href="#"><img alt="" src="/path/to/your/img-th" /></a></li>
    <li><a href="#"><img alt="" src="/path/to/your/img-th" /></a></li>
</ul>
<pre>

Если бы вы добавили класс ‘clearing-feature’ к первму li в вашем списке, то Foundation будет отображать изображение в лайтбоксе. Стоит отметить, что очистку блочной структуры сетки мы рассмотрели в начале серии уроков. Это будет гарантировать, что все миниатюры имеют одинаковую высоту и равномерно распределены.

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий