Мы, люди, которые делают сайты, должны делать их максимально удобными в использовании, в том числе используя клавиатуру. В этом уроке рассмотрим плагин, с помощью которого можно осуществить переход по страницам с помощью горячих клавиш. Как работает плагин В колбэк функции мы можем определить какая из клавиш была нажата: налево или направо. В зависимости от нажатой клавиши, скрипт определит на какую ссылку нужно кликнуть и симулирует нажатие. Элементы пагинации Существует несколько шаблонов, по которым строятся элементы управления пагинацией: Ссылки на номера страниц (1, 2, 3, …); Ссылки на следующую и предыдущую страницы; Ссылки на первую и последнюю страницу. Обычно 3ий вариант комбинируется с одним из первых двух. HTML Давайте посмотрим на самые распространённые виды пагинации. Ссылки на номера страниц 1 <nav class="pagination" role="navigation" aria-label="Pagination"> 2 <ul> 3 <li class="pagination-number pagination-current"><a href="" title="Page 1, current page" aria-label="Page 1, current page">1</a></li> 4 <li class="pagination-number"><a href="" title="Page 2" aria-label="Page 2">2</a></li> 5 <li class="pagination-number"><a href="" title="Page 3" aria-label="Page 3">3</a></li> 6 <li class="pagination-number"><a href="" title="Page 4" aria-label="Page 4">4</a></li> 7 <li class="pagination-number"><a href="" title="Page 5" aria-label="Page 5">5</a></li> 8 </ul> 9 </nav> Ссылки на следующую и предыдущую страницы 1 <nav class="pagination" role="navigation" aria-label="Pagination"> 2 <ul> 3 <li class="pagination-prev"><a href="" rel="prev" title="Previous page" aria-label="Previous page">Prev</a></li> 4 <li class="pagination-next"><a href="" rel="next" title="Next page" aria-label="Next page">Next</a></li> 5 </ul> 6 </nav> Ссылки на первую и последнюю страницу 01 <nav class="pagination" role="navigation" aria-label="Pagination"> 02 <ul> 03 <li class="pagination-first"><a href="" title="First page" aria-label="First page">First</a></li> 04 <li class="pagination-prev"><a href="" rel="prev" title="Previous page" aria-label="Previous page">Prev</a></li> 05 <li class="pagination-number pagination-current"><a href="" title="Page 1, current page" aria-label="1, current page">1</a></li> 06 <li class="pagination-number"><a href="" title="Page 2">2</a></li> 07 <li class="pagination-number"><a href="" title="Page 3">3</a></li> 08 <li class="pagination-number"><a href="" title="Page 4">4</a></li> 09 <li class="pagination-number"><a href="" title="Page 5">5</a></li> 10 <li class="pagination-next"><a href="" rel="next" title="Next page" aria-label="Next page">Next</a></li> 11 <li class="pagination-last"><a href="" title="Last page" aria-label="Last page">Last</a></li> 12 </ul> 13 </nav> JavaScript Для использования плагина нужно подключить один из файлов: Без зависимостей: keyboard-pagination.js; (2kb в сжатом виде); С зависимостью от jQuery: jquery.keyboard-pagination.js; (1kb в сжатом виде); Название Значение по умолчанию Описание num false Селектор для ссылок на номера страниц (1, 2, 3, …) numCurrent false Селектор для ссылки на текущую страницу prev false Селектор для ссылки на предыдущую страницу next false Селектор для ссылки на следующую страницу first false Селектор для ссылки на первую страницу last false Селектор для ссылки на последнюю страницу doublePressInt 250 Временный промежуток в миллисекундах для определения двойного нажатия. keyCodeLeft 37 Код клавиши для нажатия на предыдущую страницу keyCodeRight 39 Код клавиши для нажатия на следующую страницу 01 // без jQuery 02 03 keyboardPagination( '.pagination', 04 { 05 num: '.pagination-number', 06 numCurrent: '.pagination-current', 07 prev: '.pagination-prev', 08 next: '.pagination-next', 09 first: '.pagination-first', 10 last: '.pagination-last' 11 }); 12 13 14 // с jQuery 15 16 $( '.pagination' ).keyboardPagination( 17 { 18 num: '.pagination-number', 19 numCurrent: '.pagination-current', 20 prev: '.pagination-prev', 21 next: '.pagination-next', 22 first: '.pagination-first', 23 last: '.pagination-last' 24 }); Плагин содержит два открытых метода: Название Описание pause Остановка плагина resume Возобновление работы плагина 01 // без jQuery 02 03 var pagination = keyboardPagination( '.pagination', { /* options */ }); 04 05 pagination.pause(); 06 pagination.resume(); 07 08 09 // с jQuery 10 11 var $pagination = $( '.pagination' ).keyboardPagination({ /* options */ }); 12 13 $pagination.pause(); 14 $pagination.resume(); Примеры При использовании плагина, задавайте только те значения, которые вам необходимы, остальное можно опустить. Если в вашей пагинации есть только ссылки на следующую и предыдущую страницы, то задайте значения только для опций prev и next: 1 keyboardPagination( '.pagination', 2 { 3 prev: '.pagination-prev', 4 next: '.pagination-next' 5 }); Если же только ссылки из номеров страниц (1, 2, 3, …), то вам нужно задать только параметры num и numCurrent: 1 keyboardPagination( '.pagination', 2 { 3 num: '.pagination-number', 4 numCurrent: '.pagination-current', 5 }); Если же у вас понамешаны оба вида элементов управления пагинацией, то вам нужно создать только одну из групп настроек: или prev и next; или num и numCurrent. Для применения плагина к ссылкам на первую и последнюю страницу, воспользуйтесь следующими опциями: 1 keyboardPagination( '.pagination', 2 { 3 first: '.pagination-first', 4 last: '.pagination-last', 5 num: '.pagination-number', 6 numCurrent: '.pagination-current' 7 });