Лого SiteHere.ru

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

Раскрывающаяся карточка

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

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

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

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



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

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 код следующий:

1
2
3
4
5
6
7
8
9
10
11
12
13
<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 функция:

1
2
3
4
5
6
7
$(".flipout").flipout_cards({
    animation: "flipOut",         
    beforeOpen: function () {},   
    afterOpen: function () {},    
    beforeClose: function () {},  
    afterClose: function () {}    
  });

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

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


Вывод

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


Успехов!

Источник: http://www.onextrapixel.com/2014/02/12/create-a-dynamic-flip-out-card-with-flipout_cards-js/

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *