Все для веб-дизайнера
Как стилизовать постраничную навигацию сайта
Как известно сайт может состоять не только из одной страницы, если у вас накопилось множество страниц, то нужно креативно организовать навигацию по ним, зачастую используют просто цифровую нумерацию, просто и гениально на один взгляд, но когда страниц очень много, то приходится переходить через десятки страниц в поисках необходимой, согласитесь, это не весьма удобно, но выход есть, можно создать постраничную навигацию с небольшой хитростью, а именно слайдером, который поможет с легкостью найти необходимую страничку.
Добавление набора стрелок существенно облегчает доступ к предыдущей и следующей страницам. И так, рассмотрим.
Шаг 1. HTML
Мы создаем разметку, содержащую ID и класс «sp-slider-wrapper» для вызова постраничного слайдера, кроме этого используем классы «sp-prev» и «sp-next», для навигации при помощи стрелок.
|
1 2 3 4 5 |
</pre> <div class="sp-slider-wrapper" id="slider"><nav><a class="sp-prev" href="#">Назад</a> <a class="sp-next" href="#">Вперед</a></nav></div> <pre> |
С разметкой закончили перейдем к следующему шагу.
Шаг 2. JavaScript
Нам необходимо оживить, для этого нам необходимо вызвать функции для работы навигации. Делаем это с помощью следующего кода.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { var $update = $( '#preview > span' ); $( "#slider" ).pagination( { total : 100, onChange : function( value ) { $update.text( value ); } } ); }); |
Стили достаточно объемные, по этому нет смысла их выкладывать, просмотреть их можно в исходниках, кроме этого там все достаточно просто.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Интересно:
| Опубликовал admin 25.12.2012 в 23:59, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...