Делаем брошюру с помощью плагина jQuery

BookBlock - плагин jQuery, который можно использовать для создания компонентов, похожих на брошюры, с навигацией в виде переворачивающихся страниц. Можно использовать любое содержание - текст или картинки. Плагин трансформирует структуру только когда требуется (то есть при переходе на следующую страницу) и использует перекрывающие слои для формирования теней от страниц для создания реалистичного внешнего вида.

В демонстрации также используется библиотека jQuery++, которая добавляет функционал для jQuery (особенно касательно события swipe).

Следующая структура добавляет содержание в контейнер с классом “cf-item”, который представляет открытую страницу (левую и правую сторону):

<div id="bb-bookblock" class="bb-bookblock">
	<div class="bb-item">
		<!-- custom content -->
	</div>
	<div class="bb-item">
		
	</div>
	<div class="bb-item">
		<!-- ... -->
	</div>
	<div class="bb-item">
		<!-- ... -->
	</div>
	<!-- ... -->
</div>

Плагин вызывается следующим образом:

$(function() {
             
    $( '#bb-bookblock' ).bookblock();
 
});

Можно также использовать другие скрипты (как показано в демонстрации).

 

Следующие опции доступны:

// Скорость переворачивания страниц в ms.
speed       : 1000,
 
// Переход для переворачивания страниц
easing      : 'ease-in-out',
 
// Если установлено значение true, то будут использоваться перекрывающие слои для генерации теней
shadows     : true,
 
// Прозрачность теней для неподвижной стороны (когда переворачивающаяся сторона находится над ней).
// value : 0.1 - 1
shadowSides : 0.2,
 
// Прозрачность тени для переворачивающейся стороны
// value : 0.1 - 1
shadowFlip  : 0.1,
 
// Перспектива
perspective : 1300,
 
// Если надо показывать первый элемент по достижении конца
circular    : false,
 
// Определяет селектор, который запускает функцию next(). Пример: '#bb-nav-next'.
nextEl      : '',
 
// Определяет селектор, который запускает функцию prev().
prevEl      : '',
 
// Возвратная функция, которая выполняется после завершения переворота.
// page - индекс текущей страницы.
// isLimit  - имеет значение true, если текущая страница является последней (или первой).
onEndFlip   : function( page, isLimit ) { return false; },
 
// Возвратная функция, которая выполняется до переворота страницы.
// page - индекс текущей страницы.
onBeforeFlip: function( page ) { return false; }

Для представления работы плагина, смотрите демонстрацию его возможностей.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/PguPffq0D0Q/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Делаем брошюру с помощью плагина jQuery | | 2012-09-11 11:51:05 | | Статьи Web-мастеру | | BookBlock - плагин jQuery, который можно использовать для создания компонентов, похожих на брошюры, с навигацией в виде переворачивающихся страниц. Можно использовать любое содержание - текст или | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: