Апрель 27, 2015 Запись была обновлена
Google Tips — красивые записки с анимацией для вашего сайта
Возможно вы помните урок, в котором мы создавали записки с помощью CSS3. Записки в том уроке были похожи на записки которые можно увидеть на Windows 7. Если вы не видели и пропустили прошлый урок, тогда вы сможете найти ссылку на него в полной записи. А в этом уроке мы создадим записки, которые использует Google. Привлекательные записки с красивой анимацией при раскрытии записки. Также в примерах есть 5 демо с разными настройками, поэтому вы можете выбрать тот, который больше всего вам подходит.
Урок, в котором мы создавали записки с помощью CSS3 — Создание эффекта записки с помощью CSS3
Примеры записок можно увидеть здесь:
Посмотреть примерСкачать
Как пользоваться?
HTML часть
Необходимо скачать и подключить библиотеку jQuery(она находится здесь) и jquery.tip_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.tip_cards.js"></script> <link rel="stylesheet" type="text/css" href="css/tip_cards.css" /> |
После этого нужно определиться будут ли наши записки вращающимися или нет. Дело в том что для вращающихся записок и невращающихся используются разная разметка. Если вы хотите точно такие же(вращающиеся) записки как на Google, тогда используйте этот код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <body> .. <ul class="tips"> <li> <div class="tc_front"> <a href="#tip1">...</a> </div> <div class="tc_back">...</div> <div id="tip1" class="tip"> <div class="tc_front">...</div> <div class="tc_back">...</div> </div> </li> .. </body> |
И как видите здесь есть две стороны. А вот если вам нужна лишь одна сторона и нет необходимости во вращении, тогда вам нужен следующий код:
1 2 3 4 5 6 7 8 9 10 11 | <body> .. <ul class="tips"> <li> <a href="#tip1">...</a> <div id="tip1" class="tip"> ... </div> </li> .. </body> |
jQuery часть
После того как с разметкой закончено необходимо написать небольшой код на Javascript. Плагин сам определит какой тип записок вам нужен, а вам лишь нужно задать другие настройки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(".tips").tip_cards({ entrance: "bottom", column: 4, margin: "1%", selector: "> li", hoverTilt: "right", triggerSelector: "> li a", cardFlyDirection: "all", closeButton: "X", flipButton: "Flip", navigation: true, beforeOpen: null, afterOpen: null }); |
Рассмотрим эти свойства более подробно:
- entrance — данное свойство отвечает то направление вылета записки при анимации. Оно может принимать следующие значения — «bottom», «left», «right», и «top». По умолчанию используется значение «bottom».
- column — свойство отвечает за выравнивание записок по столбцам. По умолчанию данное свойство равно 4.
- margin — определяет расстояние между записками в процентах. По умолчанию равно «1%».
- selector — это селектор, по которому определяется всё остальное содержимое записки. Конечно, вы можете изменять структуру списка, и тогда необходимо будет указать свой селектор. По умолчанию это «> li».
- hoverTilt — определяет в какую сторону поворачивать записку при наведении. Может принимать значения «right», «left», «up», и «down». По умолчанию «right».
- triggerSelector — в этом плагине вы также можете определять свой переключатель, а также тот переключатель, который появляется во всплывающем окне. По умолчанию используется ссылка, которая находится в списке.
- cardFlyDirection — это свойство позволяет задать направление в котором появляется всплывающее окно. Может принимать следующие значения «all», «top», «bottom», «left», и «right».
- closeButton — с помощью данного свойства можно определить текст для кнопки закрытия окна. А также можно задать значение false и тогда будет использован текст «X».
- flipButton — в отличие от прошлого свойство, с помощью данного можно определить текст для кнопки поворота. А также можно задать значение false и тогда будет использован текст «Повернуть».
- navigation — использовать или не использовать навигацию для просмотра записок одну за одной.
- beforeOpen — функция, которая будет вызвана до вызова всплывающего окна. Ее нужно писать следующим образом:
1 2 3 4 5
$(".tips").tip_cards({ beforeOpen: function () { ... } });
- beforeOpen — функция, которая будет вызвана после вызова всплывающего окна. Ее нужно писать следующим образом:
1 2 3 4 5
$(".tips").tip_cards({ afterOpen: function () { ... } });
Вывод
Красивые записки для вашего сайта с классным эффектом.
Успехов!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Спасибо, огромное!
На blogspot/blogger, интересно jQuery будет работать?
Виктор, конечно будет работать. Для этого необходимо:
1. Зайти в панель управления blogger — Шаблон — Изменить HTML.
2. Вставить между тегами head две библиотеки, которые описаны в уроке.