—»     —»   BookBlock: плагин вращения контента
  Раздел: Скрипты и коды   Комментариев: 1  

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



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: Пример с пользовательским контентом

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Design FactoRy   Прочитано (раз): 7910   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 14 марта 2014 @ 16:05
Написал: Елена — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Здравствуйте!
Пытаюсь использовать этот плагин.
Но у меня не работают кнопки навигации.
Консоль ошибок не выдает.
Подскажите, пожалуйста, какие могут быть возможные ошибки?
Что нужно сделать?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31