Использование

Как вы можете видеть в файлах примера, вам необходимо включить JavaScript файл jquery.pagepiling.js (или минифицированную версию jquery.pagepiling.min.js) и css-файл jquery.pagepiling.css плагина, а также jQuery.

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

Установка с помощью bower

Как вариант, вы можете установить pagePiling.js с помощью bower: Terminal:

bower install pagepiling.js

Включение файлов

<link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.js"></script>

Опциональное использование CDN

Если вы предпочитаете использовать CDN для загрузки необходимых файлов, pagePiling.js находится на CDNJS: https://cdnjs.com/libraries/pagePiling.js.

Требуемая структура HTML

Каждый раздел будет определен с помощью div, содержащего класс section. Активным разделом по умолчанию будет первый раздел, который принимается за главную страницу.

<div id="pagepiling">
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
</div>

Инициализация

Все, что вам нужно сделать, это вызвать плагин внутри функции $(document).ready:

$(document).ready(function() {
	$('#pagepiling').pagepiling();
});

Более сложная инициализация со всеми установленными опциями может выглядеть следующим образом:

$(document).ready(function() {
	$('#pagepiling').pagepiling({
	    menu: null,
        direction: 'vertical',
        verticalCentered: true,
        sectionsColor: [],
        anchors: [],
        scrollingSpeed: 700,
        easing: 'swing',
        loopBottom: false,
        loopTop: false,
        css3: true,
        navigation: {
            'textColor': '#000',
            'bulletsColor': '#000',
            'position': 'right',
            'tooltips': ['section1', 'section2', 'section3', 'section4']
        },
       	normalScrollElements: null,
        normalScrollElementTouchThreshold: 5,
        touchSensitivity: 5,
        keyboardScrolling: true,
        sectionSelector: '.section',
        animateAnchor: false,

		//events
		onLeave: function(index, nextIndex, direction){},
		afterLoad: function(anchorLink, index){},
		afterRender: function(){},
	});
});

Доступ к разделам

Для создания ссылок на определенный раздел вы можете использовать обычную URL-ссылку, если вы используете pagePiling.js с якорными ссылками (используя опцию anchors), то вы сможете использовать якорные ссылки также для перехода непосредственно к определенному разделу.

Например: http://alvarotrigo.com/pagePiling/#page2

Будьте осторожны! Теги data-anchor не могут иметь то же значение, что и любой элемент ID на сайте (или элемент NAME для IE).

Использование меню

Чтобы связать меню с активным разделом, необходимо воспользоваться опцией menu и использовать якорные ссылки (#), как описано в разделе опций данной докумментации.

Создание прокручиваемого раздела

Если вы хотите иметь раздел с большим содержимым и создать полосу прокрутки для этого раздела, вы можете сделать это, добавив класс pp-scrollable к этому разделу:

<div class="section pp-scrollable"></div>

Была ли эта страница полезной?