Все для веб-дизайнера
Нумерация страниц на сайте с помощью jQuery
Создавая сайт вручную с нуля можно столкнуться с множеством мелких нюансов, без которых сайт с множеством информации, пожалуй, не сможет обойтись, речь идет о нумерации страниц на сайте. И в сегодняшнем уроке мы расскажем как это можно сделать с помощью небольшого плагина jQuery. В данной нумерации доступны кнопки перехода к первой, последней, следующей и предыдущей страницам и возвратная функция, которая запускается после перехода к введеному номеру, что весьма удобно для навигации по сайту.
jqPagination — плагин jQuery, который реализует новый метод нумерации страниц на сайте. Вместо вывода списка страниц jqPagination использует интерактивный блок вида ‘Страница 1 из 5’, который позволяет пользователю выбрать нужную страницу. Плагин проверяет введенный номер страницы.
Особенности плагина:
- Независимый дизайн
- Простая настройка
- Легкая интеграция с приложением/сайтом
- Использует jQuery
Для начала нам необходимо подключить фреймворки, не забывайте правильно указывать пути к ним для правильной работы:
|
1 2 3 4 5 6 7 8 9 |
<!-- Стили для демонстрации --> <!-- Стили jqPagination --> <!-- Скрипты --> <script type="text/javascript" src="./js/jquery-1.6.2.min.js"></script><script type="text/javascript" src="./js/jquery.jqpagination.js"></script> <script type="text/javascript" src="./js/scripts.js"></script> |
Чтобы установить данную навигацию нужно разместить данный HTML-код в необходимую позицию документа:
|
1 2 3 4 5 6 7 8 |
</pre> <div><a href="#" data-action="first">«</a> <a href="#" data-action="previous">‹</a> <input type="text" readonly="readonly" data-max-page="40" /> <a href="#" data-action="next">›</a> <a href="#" data-action="last">»</a></div> <pre> |
Затем инициализуем плагин для введенного элемента:
|
1 2 3 4 5 |
$('.pagination').jqPagination({ paged: function(page) { // выполняем операции с номером страницы } }); |
Некоторые опции плагина можно редактировать под свой вкус, вот некий перечень этих опций:
- current_page — текущая страница при запуске, по умолчанию: 1. Также можно использовать data атрибут
current-pageв элементе ввода.
- link_string — строка адреса, которая устанавливается в атрибуте href ссылки на страницу, по умолчанию: Можно использовать
{page_number}для подстановки в адрес номера страницы для формирования правильной сссылки на документ.
- max_page — максимальное количество страниц, по умолчанию: null. Если установлено значение null, то будет использоваться data атрибут
max-page. Если никаких значений не задано, считается. что страница одна.
- page_string — строка в полее ввода, по умолчанию: ‘Page {current_page} of{max_page}’. Используйте
{current_page}и{max_page}для вывода в строке номера текуще страницы и максимального количества старниц.
И последним этапом будут стили CSS, вот как они выглядят:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
.pagination { float: left; border: 1px solid #CDCDCD; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .pagination a { float: left; height: 50px; width: 20px; background-color: rgb(0,50,75); color: #8fa81f; text-align: center; text-decoration: none; font-family: Times, 'Times New Roman', Georgia, Palatino; font-weight: bold; font-size: 16px; outline: none; vertical-align: middle; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(221,221,221)), color-stop(1, rgb(243,243,243)) ); background-image: -moz-linear-gradient( center bottom, rgb(221,221,221) 0%, rgb(243,243,243) 100% ); } .pagination a:hover, .pagination a:focus, .pagination a:active { background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #CECECE), color-stop(1, #E4E4E4) ); background-image: -moz-linear-gradient( center bottom, #CECECE 0%, #E4E4E4 100% ); } .pagination a:first-child { border-radius: 2px 0 0 2px; -moz-border-radius: 2px 0 0 2px; -webkit-border-radius: 2px 0 0 2px; } .pagination a:last-child { border-radius: 0 2px 2px 0; -moz-border-radius: 0 2px 2px 0; -webkit-border-radius: 0 2px 2px 0; } .pagination a { border-right: 1px solid #CDCDCD; border-left: 1px solid #CDCDCD; } .pagination a:first-child { border: none; } .pagination a:last-child { border: none; } .pagination input { border: none; float: left; text-align: center; height: 20px; outline: none; vertical-align: middle; width: 120px; padding: 0; margin: 0; } /* Класс gigantic предназначен для демонстрации */ .gigantic.pagination { margin: 30px 0; } .gigantic.pagination a { height: 60px; width: 60px; font-size: 50px; line-height: 50px; } .gigantic.pagination input { width: 300px; height: 60px; font-size: 30px; } |
Вот и все, наша навигация готова. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 16.11.2011 в 05:51, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
