Tạo phím tắt cho thanh điều hướng trang

Máy tính có nhiều thiết bị đầu vào để việc sử dụng dễ dàng hơn. Hãy tưởng tượng nhập văn bản mà không cần bàn phím hoặc lướt một trang web mà không cần đến chuột. Chính vì thế, việc đưa các ý tưởng đó vào website là những điều đáng suy ngẫm, Osvalda đã biến nó thành sự thật và hôm nay tôi sẽ giới thiệu với các bạn thủ thuật cơ bản nhất nhưng rất hữu ích đó chính là "Tạo phím tắt cho thanh điều hướng trang" - Keyboard Shortcuts for Pagination.

Vậy nó hoạt động như thế nào?

Nó hoạt động dựa trên một đoạn mã "gọi lại" bàn phím từ JavaScript. Mã "gọi lại" có nghĩa là nó phát hiện một trong hai phím mũi tên trên bàn phím được nhấn: trái hoặc phải. Sau đó, chọn một liên kết điều hướng trang tương ứng và chỉ đơn giản là mô phỏng (kích hoạt) một sự kiện click cho nó.

Mẫu điều hướng trang

Trên thế giới, giao diện người dùng có rất nhiều mẫu thanh điều hướng trang khác nhau. Các mẫu có thể là một hoặc kết hợp của các tùy chọn sau:

• Liên kết đánh dấu (1, 2, 3, …);
• Liên kết trang trước (Previous page) và trang sau (Next page);
• Liên kết trang đầu tiên (First page) và cuối cùng (Last page).

Thông thường tùy chọn thứ 3 thường chỉ được sử dụng khi kết hợp với các tùy chọn khác.

HTML

Hãy xem "minh họa" các mẫu điều hướng trang phổ biến nhất.

Số thứ tự(1, 2, 3, …)

1 2 3 4 5 6 7 8 9

<nav class="pagination" role="pagination" aria-label="pagination">     <ul>         <li class="pagination-number pagination-current"><a href="" title="Page 1, current page" aria-label="Page 1, current page">1</a></li>         <li class="pagination-number"><a href="" title="Page 2" aria-label="Page 2">2</a></li>         <li class="pagination-number"><a href="" title="Page 3" aria-label="Page 3">3</a></li>         <li class="pagination-number"><a href="" title="Page 4" aria-label="Page 4">4</a></li>         <li class="pagination-number"><a href="" title="Page 5" aria-label="Page 5">5</a></li>     </ul> </nav>

Quay lại/Tiếp theo

1 2 3 4 5 6

<nav class="pagination" role="navigation" aria-label="pagination">     <ul>         <li class="pagination-prev"><a href="" rel="prev" title="Previous page" aria-label="Previous page">Prev</a></li>         <li class="pagination-next"><a href="" rel="next" title="Next page" aria-label="Next page">Next</a></li>     </ul> </nav>

Số thứ tự(1, 2, 3, …), Quay lại/Tiếp theo, Đầu tiên/cuối cùng

1 2 3 4 5 6 7 8 9 10 11 12 13

<nav class="pagination" role="navigation" aria-label="pagination">     <ul>         <li class="pagination-first"><a href="" title="First page" aria-label="First page">First</a></li>         <li class="pagination-prev"><a href="" rel="prev" title="Previous page" aria-label="Previous page">Prev</a></li>         <li class="pagination-number pagination-current"><a href="" title="Page 1, current page" aria-label="1, current page">1</a></li>         <li class="pagination-number"><a href="" title="Page 2">2</a></li>         <li class="pagination-number"><a href="" title="Page 3">3</a></li>         <li class="pagination-number"><a href="" title="Page 4">4</a></li>         <li class="pagination-number"><a href="" title="Page 5">5</a></li>         <li class="pagination-next"><a href="" rel="next" title="Next page" aria-label="Next page">Next</a></li>         <li class="pagination-last"><a href="" title="Last page" aria-label="Last page">Last</a></li>     </ul> </nav>

JavaScript

Gồm 2 phiên bản:

• non-jQuery: keyboard-pagination.js
• jQuery: jquery.keyboard-pagination.js

Tùy chọn Plugin

Name	Default value	Description
num	false	List items selector for numbered (1, 2, 3, …) page links
numCurrent	false	Currently active numbered list item selector
prev	false	List item selector for the previous page link
next	false	List item selector for the next page link
first	false	List item selector for the first page link
last	false	List item selector for the last page link
doublePressInt	250	An interval (delta) in milliseconds between two button presses. Serves as a shortcut for first and last, which must be set. The lower the value the faster the button should be pressed two times.
keyCodeLeft	37	Key code for previous page
keyCodeRight	39	Key code for next page

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// non-jQuery keyboardPagination( '.pagination', {     num:        '.pagination-number',     numCurrent: '.pagination-current',     prev:       '.pagination-prev',     next:       '.pagination-next',     first:      '.pagination-first',     last:       '.pagination-last' }); // jQuery $( '.pagination' ).keyboardPagination( {     num:        '.pagination-number',     numCurrent: '.pagination-current',     prev:       '.pagination-prev',     next:       '.pagination-next',     first:      '.pagination-first',     last:       '.pagination-last' });

Thủ thuật

Chi xác định những gì cần thiết. Bạn không cần phải thiết lập giá trị cho tất cả các tùy chọn.

Nếu điều hướng trang của bạn chỉ gồm Quay lại/ Tiếp theo bạn chỉ cần thiết lập giá trị cho prev và next, ví dụ:

1 2 3 4 5

keyboardPagination( '.pagination', {     prev: '.pagination-prev',     next: '.pagination-next' });

Nếu điều hướng trang của bạn chỉ gồm số thứ tự (1, 2, 3, …), bạn chỉ cần thiết lập giá trị cho numand numCurrent, ví dụ:

1 2 3 4 5

keyboardPagination( '.pagination', {     num:        '.pagination-number',     numCurrent: '.pagination-current', });

Nếu bạn có một điều hướng gồm cả Quay lại/ Tiếp theo và số thứ tự 1,2,3... bạn nên xác định chọn một trong hai: hoặc Quay lại/ Tiếp theo hoặc STT Trang và trang hiện tại. Không cần thiết khi chọn cả hai.

Nếu bạn có liên kết Đầu tiên/ Cuối cùng ở thanh điều hướng và gán việc nhấn đúp vào mũi tên để điều hướng về Trang đầu tiên hoặc cuối cùng, ví dụ:

1 2 3 4 5 6 7

keyboardPagination( '.pagination', {     first:      '.pagination-first',     last:       '.pagination-last',     num:        '.pagination-number',     numCurrent: '.pagination-current' });

DEMO

Nguồn: