Авторизация







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

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











< Назад

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





< Назад

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

Выход


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

Главная >> 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
Опубликовал: Сергей Кашурин
Просмотров: 804
Правила перепечатки

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

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

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


100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
arcticModal - простые модальные окна jQuery
В поисках простого плагина для создания модальных окон, я перепробовал кучу вариантов, наткнувшись на arcticModal я остановился. Простота работы, вес самого плагина меня очень порадовали, поэтому поделюсь с вами я именно им, так как сам его проверял.
110 бесплатных PSD элементов, для ваших слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.

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

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

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

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

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

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

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