Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

BOOKBLOCK - плагин пролистывания контента


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


    BookBlock – это jQuery плагин, который может быть использован для создания буклета, который позволяет листать контент с помощью кнопок навигации. В нём может быть использовано любое содержимое, например, изображения, ссылки или текст. При листании, плагин преобразовывает структуру буклета и использует некоторые накладки для придания реализма, такие как тень например.

    Ещё мы будем использовать плагин jQuery++ от Bitovi, который имеет несколько дополнений к jQuery (в частности, добавление события перелистывания).

    Чтобы  добавить в наш буклет пользовательское содержимое, мы будем использовать обёртку с классом “bb-item”, которая будет представлять открытую страницу (слева и справа):

<div id="bb-bookblock" class="bb-bookblock">
    <div class="bb-item">
        <!—Ваш контент -->
    </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,
 
// прозрачность тени страницы во время перелистывания
// значения : 0.1 - 1
shadowSides : 0.2,
 
// прозрачность тени перелистываемой страницы
// значения : 0.1 - 1
shadowFlip  : 0.1,
 
// значение перспективы
perspective : 1300,
 
// если мы должны показать первую страницу после достижения конца.
circular    : false,
 
// указываем кнопку для перехода вперёд. пример: '#bb-nav-next'.
nextEl      : '',
 
// указываем кнопку для перехода назад
prevEl      : '',
 
// автолистание
autoplay        : false,
         
// задерка автолистания в миллисекундах 
interval        : 3000,
 
// обратный вызов перехода перелистывания
// текущей страницы
// если текущая страница является первой или последней, то isLimit true 
onEndFlip   : function( page, isLimit ) { return false; },
 
// обратный вызов, перед переходом пролистывания.
// page актуальный индекс страницы.
onBeforeFlip: function( page ) { return false; }

    Следующие публичные методы доступны для использования в сочетании с навигационными элементами:

  • next()
  • prev()
  • jump(position)

Различные демонстрации, используют различные настройки:
Демо-1: Для перехода к определённой странице, используются стрелки Вперёд/Назад;
Демо-2: Несколько блоков с изображениями, использующие точки для перехода к определённой странице;
Демо-3: Пример пользовательского контента.

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 07.03.2013
Опубликовал: Сергей Кашурин
Просмотров: 805
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


23 jQuery плагина для организации слайд-шоу и галерей на сайте
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.
Colorizer: пользователь сам выберет цвет продукта на вашем сайте
Когда вы выбираете машину, или футболку в интернет магазине, хотелось бы вам самим выбрать для неё цвет? Думаю да. В этой статье, я расскажу вам про плагин Colorizer, с помощью которого, для наших дорогих пользователей, мы сможем предоставить возможность выбора цвета продукта в котором он заинтересован, что оставит о нас приятное впечатление и заявку на покупку. jQuery плагин Colorizer - изменим цвет к лучшему.
5 прекраснейших дизайнерских решений для ваших форм входа
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!
контроль трафика приложений - вся детальная информация на сайте
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!
Бесплатные программы для ру
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!
Ксб белок на нашем сайте
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: