Постраничная навигация сайта Постраничная навигация сайта

 

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

 

ДЕМО
ИСХОДНИКИ

 

Добавление набора стрелок существенно облегчает доступ к предыдущей и следующей страницам. И так, рассмотрим.

Шаг 1. HTML

Мы создаем разметку, содержащую ID и класс "sp-slider-wrapper" для вызова постраничного слайдера, кроме этого используем классы "sp-prev" и "sp-next", для навигации при помощи стрелок.

 <div class="sp-slider-wrapper" id="slider"><nav><a class="sp-prev" href="#">Назад</a>
 <a class="sp-next" href="#">Вперед</a></nav></div>

С разметкой закончили перейдем к следующему шагу.

Шаг 2. JavaScript

Нам необходимо оживить, для этого нам необходимо вызвать функции для работы навигации. Делаем это с помощью следующего кода.

$(function() {

var $update = $( '#preview > span' );

$( "#slider" ).pagination( {
 total : 100,
 onChange : function( value ) {
 $update.text( value );
 }
 } );

});

Стили достаточно объемные, по этому нет смысла их выкладывать, просмотреть их можно в исходниках, кроме этого там все достаточно просто.

Вот и все. Готово!

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


🔖 Выбор по тегам ×

Top