Авторизация







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

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











< Назад

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





< Назад

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

Выход


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

Главная >> jQuery

Полноэкранная листалка страниц для сайта


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


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

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

    Для удобства прокрутки текста, мы будем использовать jScrollPane от Kevin Luck, это добавит пользовательскую прокрутку для содержания в случае необходимости.

    Пожалуйста, обратите внимание: CSS-3D преобразования будут работать только в современных браузерах, которые поддерживают эти свойства.

    В роли содержания для демонстрации примера мы будем использовать отрывки “The Funny Side of Physic” A. D. Crabtre из проекта "Гутенберг".

    Для примера, нам понадобятся  следующие библиотеки и jQuery плагины:

  1. BookBlock от Pedro Botelho;
  2. Пользовательский jQuery++ от Bitovi;
  3. jScrollPane от Kevin Luck;
  4. jQuery Mouse Wheel Plugin от Brandon Aaron;
  5. Пользовательский Modernizr (загляните в него, чтобы увидеть что он содержит).

    Итак, давайте начнем!

    Разметка

    Давайте создадим общий контейнер для всех наших элементов. Внутри него мы разместим блок для основного меню, и передадим ему класс «menu-panel»,  ещё обёртку для BookBlock с классом “bb-custom-wrapper”.  Для плагина BookBlock, нам необходимо создать необходимую разметку. Внутри каждого элемента, мы добавим необходимые классы, чтобы прикручивать необходимый пользовательский функционал:

<div id="container" class="container">    
 
    <div class="menu-panel">
        <h3>Table of Contents</h3>
        <ul id="menu-toc" class="menu-toc">
            <li class="menu-toc-current"><a href="#item1">Self-destruction</a></li>
            <li><a href="#item2">Why we die</a></li>
            <li><a href="#item3">The honeymoon</a></li>
            <li><a href="#item4">A drawing joke</a></li>
            <li><a href="#item5">Commencing practice</a></li>
        </ul>
    </div>
 
    <div class="bb-custom-wrapper">
 
        <div id="bb-bookblock" class="bb-bookblock">
 
            <div class="bb-item" id="item1">
                <div class="content">
                    <div class="scroller">
                        <h2>Self-destruction</h2>
                        <p>...</p>
                    </div>
                </div><!-- / основной контейнер -->
            </div><!-- /bb-item -->
 
            <div class="bb-item" id="item2"><!-- ... --></div>
 
            <div class="bb-item" id="item3"><!-- ... --></div>
 
            <div class="bb-item" id="item4"><!-- ... --></div>
 
            <div class="bb-item" id="item5"><!-- ... --></div>
 
        </div><!-- /bb-bookblock -->
         
        <nav>
            <a id="bb-nav-prev" href="#">←</a>
            <a id="bb-nav-next" href="#">→</a>
        </nav>
 
        <span id="tblcontents" class="menu-button">Table of Contents</span>
 
    </div><!-- /bb-custom-wrapper -->
 
</div><!-- /основной контейнер -->

    Эти пункты, которые имеют id и класс bb-item  будут указывать BookBlock на соответствующие страницы. Мы также добавим навигационные стрелки и кнопку для переключения открытия и закрытия меню.

    Давайте перейдем к созданию стилей.

    CSS

    Обратите внимание, что мы не будем использовать префиксы в этом примере, но вы найдете их в файлах с демонстрацией.

    Если вам интересно узнать о стилях плагина BookBlock, вы можете найти их в примере в файле bookblock.css, в рамках данного урока, обсуждаться они не будут. Вместо этого, мы сосредоточимся на других стилях, которые важны для вёрстки и настройки некоторых вещей.

    Давайте начнём с импорта Lato шрифта от Google web fonts:

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

    Наша страничка, должна иметь высоту 100%, ведь мы будем устанавливать высоты элементов в %.

html { 
    height: 100%; 
}

    Так же мы будем использовать border-box для box-sizing, которые позволят нам определить процент ширины и высоты элементов, относительно внутренних отступов, без опасения перегрузок элементов:

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

    (Мы жёстко сбросили края всех элементов, но вы делать этого не должны, вместо этого, лучше просто нормализовать соответствующие элементы по усмотрению).

    Давайте установим шрифт для тела документа, и зададим высоту в 100%. Помните, такую высоту мы должны установить из-за потомков элемента, точнее из-за их абсолютного позиционирования:

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-weight: 400;
    font-size: 100%;
    color: #333;
    height: 100%;
}

    Мы используем библиотеку Modernizr и добавляем класс для html тега “no-js”. Если в браузере пользователя включён JavaScript, класс просто будем меняться на “js”. Это поможет нам назначить необходимые CSS стили, в случае, если JavaScript в браузере пользователя отключён. Наши 100% ширины и высоты, имеют смысл только тогда, когда JS включён, и только тогда мы хотим, чтобы элементы не умещающиеся на экране скрывались.

.js body {
    overflow: hidden;
}

    Давайте определим некоторые стили для ссылок:

a {
    color: #555;
    text-decoration: none;
}
 
a:hover {
    color: #000;
}

    Мы хотим, чтобы наш основной контейнер, занимал всю ширину и высоту окна. Основное меню будет находиться вне его, для это мы установим отрицательное значение слева. Идея заключается в том, что бы сдвинуть весь контейнер, когда произошёл щелчок мыши по кнопке меню. После этого, весь контейнер передвинется на ширину меню, и оно станет видимым.

    Итак, давайте установим основным элементам контейнера ширину и высоту в 100%, а так же добавим переход для клика:

.container,
.bb-custom-wrapper,
.bb-bookblock {
    width: 100%;
    height: 100%;
}
 
.container {
    position: relative;
    left: 0px;
    transition: left 0.3s ease-in-out;
}

    Когда мы нажмём кнопку меню, будет добавляться ещё один класс к вспомогательному блоку, для которого установим ширину в 240 пикселей (ширина боковой панели меню):

.slideRight {
    left: 240px;
}

    С отключённым JavaScript, мы не сможем сделать так же, вместо этого, давайте добавим внутренний отступ слева для общего контейнера:

.no-js .container {
    padding-left: 240px;
}

    По умолчанию, мы хотим, чтобы общее меню, было зафиксировано на левой стороне:

.menu-panel {
    background: #f1103a;
    width: 240px;
    height: 100%;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

    Если же JavaScript включен, то для блока меню мы устанавливаем абсолютное позиционирование и сдвигаем влево на 240 пикселей:

.js .menu-panel {
    position: absolute;
    left: -240px;
}

    А сейчас, давайте займёмся стилями элементов меню:

.menu-panel h3 {
    font-size: 1.8em;
    padding: 20px;
    font-weight: 300;
    color: #fff;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
} 
 
.menu-toc {
    list-style: none;
}
 
.menu-toc li a {
    display: block;
    color: #fff;
    font-size: 1.1em;
    line-height: 3.5;
    padding: 0 20px;
    cursor: pointer;
    background: #f1103a;
    border-bottom: 1px solid #dd1338;
}
 
.menu-toc li a:hover,
.menu-toc li.menu-toc-current a{
    background: #dd1338;
}

    Навигация, будет располагаться абсолютно ко всем элементам:

.bb-custom-wrapper nav {
    top: 20px;
    left: 60px;
    position: absolute;
    z-index: 1000;
}

    Стрелки – ссылки и кнопки меню, будут так же располагаться абсолютно. Давайте сделаем их круглыми, установив радиус границ в 50%:

.bb-custom-wrapper nav span,
.menu-button {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 0;
    left: 0;
    background: #f1103a;
    border-radius: 50%;
    color: #fff;
    line-height: 30px;
    text-align: center;
    speak: none;
    font-weight: bold;
    cursor: pointer;
}
 
.bb-custom-wrapper nav span:last-child {
    left: 40px;
}
 
.bb-custom-wrapper nav span:hover,
.menu-button:hover {
    background: #000;
}

    Элементы навигации, будут располагаться в левом верхнем углу, их текст мы спрячем:

.menu-button {
    z-index: 1000;
    left: 20px;
    top: 20px;
    text-indent: -9000px;
}

    Давайте создадим маленький значок, для кнопки открывающей навигацию, с помощью псевдо – элемента, с двойной тенью для верхней и нижней линии:

.menu-button:after {
    position: absolute;
    content: '';
    width: 50%;
    height: 2px;
    background: #fff;
    top: 50%;
    margin-top: -1px;
    left: 25%;
    box-shadow: 0 -4px #fff, 0 4px #fff;
}

    В случае если JS не включён, нам не нужны эти элементы, поэтому мы их просто скрываем:

.no-js .bb-custom-wrapper nav span,
.no-js .menu-button {
    display: none;
}

    Давайте перейдём к внутренней части BookBlock, к его пунктам. Содержимое должно абсолютно позиционироваться и скрываться, если заходит за границы. Это важно, ведь мы будем использовать здесь прокрутку, и только тогда, когда страница перевёрнута. Если мы ничего не сделаем с переполнением, то увидим как контент уходит за границы. Опять же, это имеет смысл когда JS включен, давайте добавим соответствующий класс “js”:

.js .content {
    position: absolute;
    top: 60px;
    left: 0;
    bottom: 50px;
    width: 100%;
    overflow: hidden;
}

    Давайте установим некоторые стили, для блока в котором будет находиться наша прокрутка:

.scroller {
    padding: 10px 5% 10px 5%;
}

    Используя для левой и правой стороны скроллера отступы в %, мы делаем его адаптивным под разрешение экрана.

    Чтобы спрятать острые кромки области в которой будет располагаться контент, давайте добавим псевдо-элементы с белым прозрачным фоном и градиентом для верхней и нижней части содержимого:

.js .content:before,
.js .content:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    z-index: 100;
    pointer-events: none;
    background: 
        linear-gradient(
            to bottom, 
            rgba(255,255,255,1) 0%, 
            rgba(255,255,255,0) 100%
        );
}
 
.js .content:after {
    top: auto;
    bottom: 0;
    background: 
        linear-gradient(
            to top, 
            rgba(255,255,255,1) 0%, 
            rgba(255,255,255,0) 100%
        );
}

    Это позволит сделать текст сверху и снизу слегка потускневшим.

    Давайте зададим стиль для элементов текста:

.content h2 {
    font-weight: 300;
    font-size: 4em;
    padding: 0 0 10px;
    color: #333;
    margin: 0 1% 40px;
    text-align: left;
    box-shadow: 0 10px 0 rgba(0,0,0,0.02);
    text-shadow: 0 0 2px #fff;
}
 
.no-js .content h2 {
    padding: 40px 1% 20px;
}
 
.content p {
    font-size: 1.2em;
    line-height: 1.6;
    font-weight: 300;
    padding: 5px 8%;
    text-align: justify;
}

    И наконец, добавим несколько стилей для разрешения экрана. Без включенного JavaScript, мы хотели бы показать основное меню для случаев, когда максимальная ширина экрана достигает 800 пикселей. Это простой пример того, как мы можем контролировать элементы при определённых условиях.

    И последнее, давайте исходя из различных разрешений экрана, зададим необходимый размер шрифту. Использование ems, делает эту работу проще:

@media screen and (max-width: 800px){
    .no-js .menu-panel {
        display: none;
    }
 
    .no-js .container {
        padding: 0;
    }
}
 
@media screen and (max-width: 400px){
    .menu-panel,
    .content {
        font-size: 75%;
    }
}

    И это было всё, что касается стилей! Давайте добавим несколько танцевальных движений к нашему настроению) и пойдём далее.

    JavaScript

    Мы начнём с кэширования некоторых элементов и инициализации плагина BookBlock. Давайте так же установим некоторые вещи которые должны происходить после переворота страницы, для текущей страницы и поведения jScrollPane. Это передаётся в onEndFlip – обратном вызове плагина BookBlock:

var $container = $( '#container' ),
 
    // элемент, который мы будем применять для BookBlock плагина
    $bookBlock = $( '#bb-bookblock' ),
 
    // Дочерние элементы BookBlock (bb-item)
    $items = $bookBlock.children(),
 
    // индекс текущего элемента
    current = 0,
 
    // инициализация BookBlock
    bb = $( '#bb-bookblock' ).bookblock( {
        speed : 800,
        perspective : 2000,
        shadowSides : 0.8,
        shadowFlip  : 0.4,
        // after each flip...
        onEndFlip : function(old, page, isLimit) {
             
            // обновление текущих значений
            current = page;
 
            // обновить навигационные стрелки исходя из текущего элемента
            updateTOC();
 
            // показать и/или скрыть навигационные стрелки
            updateNavigation( isLimit );
 
            // инициальзация jScrollPane для содержания div нового элемента
            setJSP( 'init' );
 
            // разрушаем jScrollPane для содержания div старого элемента
            setJSP( 'destroy', old );
 
        }
    } ),
    // навигационные стрелки
    $navNext = $( '#bb-nav-next' ),
    $navPrev = $( '#bb-nav-prev' ).hide(),
 
    // элементы оглавления

    $menuItems = $container.find( 'ul.menu-toc > li' ),
 
    // кнопка открыть/закрыть оглавление
    $tblcontents = $( '#tblcontents' ),
 
    transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    },
 
    // имя события  для перехода
    transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
 
    // проверьте, если переходы не поддерживается
    supportTransitions = Modernizr.csstransitions;

    Во-первых, давайте привяжем некоторые события, к отдельным элементам. Кроме того, мы должны инициализировать jScrollPane для первого (текущего) элемента:

function init() {
 
    // инициальзация jScrollPane для содержания div следующего элемента
    setJSP( 'init' );
    initEvents();
 
}

    Поскольку jScrollPane нам не всегда будет нужен, мы создадим функцию для сброса и последующего его уничтожения:

function setJSP( action, idx ) {
         
    var idx = idx === undefined ? current : idx,
        $content = $items.eq( idx ).children( 'div.content' ),
        apiJSP = $content.data( 'jsp' );
     
    if( action === 'init' && apiJSP === undefined ) {
        $content.jScrollPane({verticalGutter : 0, hideFocus : true });
    }
    else if( action === 'reinit' && apiJSP !== undefined ) {
        apiJSP.reinitialise();
    }
    else if( action === 'destroy' && apiJSP !== undefined ) {
        apiJSP.destroy();
    }
 
}

    Нам нужно создать несколько событий:

  1. Методы BookBlock next() и prev(), для событий перехода по страницам;
  2. Основное меню должно показаться / прятаться когда мы нажимаем на кнопку $tblcontents (меню);
  3. Мы будем вызывать метод BookBlock jump(), для клика по элементу оглавления;
  4. В jScrollPane инициализируем актуальные размеры окна.

    Таким образом, мы получим следующее:

function initEvents() {
 
    // добавляем событие для навигации
    $navNext.on( 'click', function() {
        bb.next();
        return false;
    } );
 
    $navPrev.on( 'click', function() {
        bb.prev();
        return false;
    } );
     
    // добавляем событие пролистывания
    $items.on( {

        'swipeleft'     : function( event ) {
            if( $container.data( 'opened' ) ) {
                return false;
            }
            bb.next();
            return false;
        },
        'swiperight'    : function( event ) {
            if( $container.data( 'opened' ) ) {
                return false;
            }
            bb.prev();
            return false;
        }
    } );
 
    // показать оглавление
    $tblcontents.on( 'click', toggleTOC );
 
    // клик по элементу меню
    $menuItems.on( 'click', function() {
 
        var $el = $( this ),
            idx = $el.index(),
            jump = function() {
                bb.jump( idx + 1 );
            };
         
        current !== idx ? closeTOC( jump ) : closeTOC();
 
        return false;
         
    } );
 
    // реинициализация jScrollPane для размера окна
    $( window ).on( 'debouncedresize', function() {
        // реинициализация jScrollPane для блока контента
        setJSP( 'reinit' );
    } );
 
}

    Видимость навигационных стрелок, будет зависеть от текущей страницы. Если мы находимся на первой странице, мы будем видеть только стрелку вправо, если же мы находимся на последней станице, то только влево, для других случаев, видимы будут обе:

function updateNavigation( isLastPage ) {
     
    if( current === 0 ) {
        $navNext.show();
        $navPrev.hide();
    }
    else if( isLastPage ) {
        $navNext.hide();
        $navPrev.show();
    }
    else {
        $navNext.show();
        $navPrev.show();
    }
 
}

    Когда мы открываем основное меню, навигационные стрелки скрываются, и появляются вновь, после его закрытия. Основное меню мы открываем с помощью CSS переходов. Если браузер их не поддерживает, то просто показываем/скрываем, это будет наш запасной вариант:

function toggleTOC() {
    var opened = $container.data( 'opened' );
    opened ? closeTOC() : openTOC();
}
 
function openTOC() {
    $navNext.hide();
    $navPrev.hide();
    $container.addClass( 'slideRight' ).data( 'opened', true );
}
 
function closeTOC( callback ) {
 
    $navNext.show();
    $navPrev.show();
    $container.removeClass( 'slideRight' ).data( 'opened', false );
    if( callback ) {
        if( supportTransitions ) {
            $container.on( transEndEventName, function() {
                $( this ).off( transEndEventName );
                callback.call();
            } );
        }
        else {
            callback.call();
        }
    }
 
}

    Фуф! :) Мы закончили! Надеюсь, вам понравился этот урок и вы нашли его полезным!

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


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

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

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

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


Colorizer: пользователь сам выберет цвет продукта на вашем сайте
Когда вы выбираете машину, или футболку в интернет магазине, хотелось бы вам самим выбрать для неё цвет? Думаю да. В этой статье, я расскажу вам про плагин Colorizer, с помощью которого, для наших дорогих пользователей, мы сможем предоставить возможность выбора цвета продукта в котором он заинтересован, что оставит о нас приятное впечатление и заявку на покупку. jQuery плагин Colorizer - изменим цвет к лучшему.
BARAJA - jQuery плагин создающий великолепные информационные карточки на вашем сайте, экономя драгоценное место
Благодаря этому плагину, элементы могут располагаться как карты в виде стопки, раскладываясь перед нами оригинальным способом. Добавьте к элементам небольшой текст и уникальный рисунок, примените оригинальный эффект преобразования, и ваша страничка преобразится на глазах.
24 классных PHP библиотеки, о которых вы должны знать
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.

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

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

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

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

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

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

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