Створення розкривається картки

Відео: Створення випадаючих списків в Excel

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

Уроки про спливаючі підказки:

• Красива підказка при натисканні
• Підказки CSS3
• Красиве повідомлення на CSS3
• Простими підказками на CSS3 і jQuery

Приклад можна побачити тут:

Подивитися прімерСкачать

Як користуватися?

HTML частина

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

Відео: ЛИСТІВКА З КВІТАМИ НА 8 БЕРЕЗНЯ СВОЇМИ РУКАМИ Card with flowers with his own hands

123

lt;script type="Text / javascript" src="Http://code.jquery.com/jquery-1.9.1.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.flipout_cards.js"gt; lt;/scriptgt;lt;link rel="Stylesheet" type="Text / css" href="Css / flipout_cards.css" /gt;

HTML код наступний:

12345678910111213

lt;bodygt; ..lt;div class="Flipout"gt;lt;div class="Foc-main"gt; ...lt;/divgt;lt;div class="Foc-left"gt; ...lt;/divgt; ...lt;/divgt; ..lt;/bodygt;

Відео: Створення карти за допомогою SASPlanet.Как зберегти карту в саспланет

Контейнер з класом foc-main - це основний блок нашої картки, який показується за замовчуванням. А за аналогією якщо ми хочемо додати блок зліва, тоді потрібно блоку потрібно написати клас foc-left. Якщо справа - foc-right, знизу - foc-bottom, зверху - foc-top.

jQuery частина

І останнє, це невелика javascript функція:

1234567

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

Плагін сам визначить скільки вкладень. Розглянемо ці властивості:

• animation - за допомогою цієї властивості ми визначаємо яка анімація при появі нової вкладки. Воно може набувати таких значень: «flipOut», «slideOut» і «foldOut». За замовчуванням «flipOut».
• beforeOpen - функція, яка виконується перед появою вкладки.
• afterOpen - функція, яка виконується після появи вкладки.
• beforeClose - функція, яка виконується перед закриттям вкладки.
• afterClose - функція, яка виконується після закриття вкладки.

висновок

Чомусь я відразу представив меню в такому вигляді, але можна і просто повідомлення приховувати даними чином. Вообщем, коли вам сподобався плагін - беріть його собі # 128578; .

Відео: Spintires Редактор карт (Створення карти Частина 1)

Успіхів!

джерело: https://onextrapixel.com/2014/02/12/create-a-dynamic-flip-out-card-with-flipout_cards-js/