BOOKBLOCK: Плагин перелистывания контента
BookBlock это плагин, который может быть использован для создания буклета, как компоненты, которые позволяют "перелистывать" страницы. Любой контент может быть использован, например, изображения или текст.Плагин преобразует структуру только в случае необходимости (т.е. когда идет перелистывание страницы), а также использует некоторые накладки, как тени для страниц, чтобы создать больше реализма.
Мы будем использовать jQuery++ by Bitovi которая имеет некоторые дополнения для JQuery (в частности, добавляет события).
Следующую структуру позволит добавить пользовательский контент в обертку с классом "bb-item», который представляет собой открытую страницу (левая и правая сторона):
Плагин можно вызвать так:
Вы также можете выбрать различные эффекты (см. одну из демо-файлов).
Опции
Доступны следующие опции:
Следующие методы доступны для использования в сочетании с элементами навигации:
Мы будем использовать jQuery++ by Bitovi которая имеет некоторые дополнения для JQuery (в частности, добавляет события).
Следующую структуру позволит добавить пользовательский контент в обертку с классом "bb-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>
<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();
});
$( '#bb-bookblock' ).bookblock();
});
Вы также можете выбрать различные эффекты (см. одну из демо-файлов).
Опции
Доступны следующие опции:
Код
// вертикальную или горизонтальную панель
orientation : 'vertical',
// ltr (слева направо) or rtl (справа налево)
direction : 'ltr',
// скорость для флип-перехода в миллисекундах.
speed : 1000,
// Указываем унимацию.
easing : 'ease-in-out',
// если установлено верно, То накладываются тени для перелистывания
shadows : true,
// Значение непрозрачности для "теней" с обеих сторон .
// Значение : 0.1 - 1
shadowSides : 0.2,
// Значение непрозрачности для "теневой" на листать страницы (во время перелистывания).
// Значение : 0.1 - 1
shadowFlip : 0.1,
// Бесконечная прокрутка.
circular : false,
// Если указаваем селектор, который вызывает next() функцию. Например: '#BB-NAV-Next".
nextEl : '',
// Если указаваем селектор, который вызывает prev() функцию.
prevEl : '',
// Автоперелистывание
autoplay : false,
// Интервал автоперелистывания.
interval : 3000,
onEndFlip : function( page, isLimit ) { return false; },
onBeforeFlip: function( page ) { return false; }
orientation : 'vertical',
// ltr (слева направо) or rtl (справа налево)
direction : 'ltr',
// скорость для флип-перехода в миллисекундах.
speed : 1000,
// Указываем унимацию.
easing : 'ease-in-out',
// если установлено верно, То накладываются тени для перелистывания
shadows : true,
// Значение непрозрачности для "теней" с обеих сторон .
// Значение : 0.1 - 1
shadowSides : 0.2,
// Значение непрозрачности для "теневой" на листать страницы (во время перелистывания).
// Значение : 0.1 - 1
shadowFlip : 0.1,
// Бесконечная прокрутка.
circular : false,
// Если указаваем селектор, который вызывает next() функцию. Например: '#BB-NAV-Next".
nextEl : '',
// Если указаваем селектор, который вызывает prev() функцию.
prevEl : '',
// Автоперелистывание
autoplay : false,
// Интервал автоперелистывания.
interval : 3000,
onEndFlip : function( page, isLimit ) { return false; },
onBeforeFlip: function( page ) { return false; }
Следующие методы доступны для использования в сочетании с элементами навигации:
Код
$( ‘#bb-bookblock’ ).bookblock( ‘next’ )
$( ‘#bb-bookblock’ ).bookblock( ‘prev’ )
$( ‘#bb-bookblock’ ).bookblock( ‘jump’, position )
$( ‘#bb-bookblock’ ).bookblock( ‘first’ )
$( ‘#bb-bookblock’ ).bookblock( ‘last’ )
$( ‘#bb-bookblock’ ).bookblock( ‘prev’ )
$( ‘#bb-bookblock’ ).bookblock( ‘jump’, position )
$( ‘#bb-bookblock’ ).bookblock( ‘first’ )
$( ‘#bb-bookblock’ ).bookblock( ‘last’ )
-
FalleN -
5369 -
1 -
244
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...