Главная > Скрипты и коды > BookBlock: плагин вращения контента

BookBlock: плагин вращения контента


24 сентября 2012, 14:50. Разместил: Design FactoRy
BookBlock представляет собой jQuery-плагин, который можно использовать для создания компонентов в виде буклетов, которые позволят вам создавать навигацию наподобие «переворачивающихся страниц». Здесь можно задействовать любой контент, будь то изображения или текст. Плагин трансформирует структуру только при необходимости (другими словами, только при переворачивании страницы) и использует наложения и тени для придания реалистичности.

BookBlock: плагин вращения контента

Мы воспользуемся jQuery++ от Bitovi, который оснащен некоторыми дополнениями для 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();

});

Вам также надо будет включить и другие необходимые скрипты (ознакомьтесь с демо-файлами).

Опции

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

// скорость переворота в миллисекундах.
speed : 1000,

// смягчение перехода
easing : 'ease-in-out',

// если выставлено на true, то и переворачивающаяся страница и стороны будут оформлены наложениями для имитации тени.
shadows : true,

// значение непрозрачности для shadow на обеих сторонах (когда переворачивающаяся страница поверх них).
// значения : 0.1 - 1
shadowSides : 0.2,

// значение непрозрачности для shadow на переворачивающейся странице (в момент переворота).
// значения : 0.1 - 1
shadowFlip : 0.1,

// значение перспективы
perspective : 1300,

// если нам необходимо отобразить первый элемент после достижения завершения.
circular : false,

// если нам нужно указать селектор, который запускает функцию next(). Пример: '#bb-nav-next'.
nextEl : '',

// если нам нужно указать селектор, который запускает функцию prev().
prevEl : '',

// callback-функция после перехода с переворотом.
// страница, которая является основной страницей пункта.
// isLimit выставлен на true, если текущая страница является последней (или первой).
onEndFlip : function( page, isLimit ) { return false; },

// callback-функция до перехода с переворотом.
// страница, которая является основной страницей пункта.
onBeforeFlip: function( page ) { return false; }

Ознакомьтесь с 3 демо-проектами, приведенными ниже. Они обозначены разными настройками:

Демо 1: Кнопки вперед/назад, а также кнопка для перехода к конкретной странице (здесь: к последней странице)
Демо 2: Несколько пунктов с переходом посредством точек
Демо 3: Пример с пользовательским контентом

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.

Вернуться назад