Создание раскрывающейся карточки

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

Уроки про всплывающие подсказки:

Пример можно увидеть здесь:

Посмотреть пример Скачать

Как пользоваться?

HTML часть

Для начала нужно скачать библиотеку jQuery(здесь) и плагин jQuery.flipout_cards.js со стилями(здесь), а затем подключить:

1
2
3

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.flipout_cards.js"></script>
<link rel="stylesheet" type="text/css" href="css/flipout_cards.css" />

HTML код следующий:

<body>
    ..
    <div class="flipout">
      <div class="foc-main">
       ...
      </div>
      <div class="foc-left">
       ...
      </div>
      ...
    </div>
    ..
</body>

Контейнер с классом foc-main — это основной блок нашей карточки, который показывается по умолчанию. А по аналогии если мы хотим добавить блок слева, тогда нужно блоку нужно написать класс foc-left. Если справа — foc-right, снизу — foc-bottom, сверху — foc-top.

jQuery часть

И последнее, это небольшая Javascript функция:

$(".flipout").flipout_cards({
    animation: "flipOut",         
    beforeOpen: function () {},   
    afterOpen: function () {},    
    beforeClose: function () {},  
    afterClose: function () {}    
  });

Плагин сам определит сколько вложений. Рассмотрим эти свойства:

animation — с помощью этого свойства мы определяем какая анимация при появлении новой вкладки. Оно может принимать следующие значения: «flipOut», «slideOut» и «foldOut». По умолчанию «flipOut».
beforeOpen — функция, которая выполняется перед появлением вкладки.
afterOpen — функция, которая выполняется после появления вкладки.
beforeClose — функция, которая выполняется перед закрытием вкладки.
afterClose — функция, которая выполняется после закрытия вкладки.

Вывод

Почему-то я сразу представил меню в таком виде, но можно и просто уведомления скрывать данным образом. Вообщем, если вам приглянулся плагин — берите его себе 🙂 .