Cách thêm phím tắt vào trang web của bạn
Yêu phím tắt? Họ có thể giúp bạn tiết kiệm rất nhiều thời gian, phải không? Bạn có muốn thêm phím tắt vào trang web của riêng bạn, vì lợi ích của khách truy cập không? Nó sẽ cải thiện đáng kể khả năng truy cập và điều hướng trang web của bạn.
Trong bài đăng này, tôi sẽ đưa ra một hướng dẫn nhanh về cách thêm lối tắt vào trang web của bạn bằng thư viện JavaScript có tên Mousetrap. Với Mousetrap bạn có thể chỉ định phím như Shift, Ctrl, Alt, Tùy chọn và Lệnh để thực hiện các chức năng cụ thể trong trang web của bạn. Nó cũng hoạt động tốt trên các trình duyệt cũ hơn.
Thêm thông tin về Hongkiat:
- Tạo tooltip hoạt hình dễ dàng với Hint.Css
- Xây dựng hướng dẫn từng bước bằng cách sử dụng Intro.Js [Hướng dẫn]
- Cách tạo kiểu thanh trượt phạm vi HTML5
- Cách sử dụng cookie & HTML5 localst Storage
Bắt đầu
Bắt đầu bằng cách tạo một tài liệu HTML mới cùng với nội dung và liên kết thư viện Mousetrap. Tôi sẽ sử dụng thư viện Mousetrap được lưu trữ trong CDNjs để thư viện sẽ được phục vụ qua mạng CloudFlare, tốc độ này sẽ nhanh hơn máy chủ của chúng tôi
Bây giờ chúng tôi sẽ sử dụng Mousetrap 'trói buộc' phương pháp để gắn các phím bàn phím có chức năng. Bạn có thể chỉ định một phím đơn, tổ hợp phím hoặc các phím trình tự, ví dụ
Khóa đơn
Trong ví dụ này, chúng tôi liên kết s.
Mousetrap.bind ('s', function (e) // chức năng của bạn tại đây); Phím kết hợp
Trong ví dụ này, chúng tôi liên kết Ctrl và s. Bạn sẽ cần nhấn hai phím hoàn toàn để thực hiện chức năng được chỉ định.
Mousetrap.bind ('ctrl + s', function (e) // chức năng của bạn tại đây); Khóa trình tự
Trong ví dụ này, người dùng sẽ cần nhấn g và sau đó S sau đó Nếu bạn đang phát triển trò chơi dựa trên web, điều này có thể hữu ích để thêm một tổ hợp phím ẩn bí mật.
Mousetrap.bind ('g s', function (e) // chức năng của bạn tại đây); Sử dụng bẫy chuột
Chúng tôi sẽ xây dựng một trang web đơn giản với một vài phím tắt cho phép người dùng truy cập một số chức năng trên trang web. Chúng tôi sẽ sử dụng jQuery để giúp thao tác với tài liệu HTML dễ dàng hơn và chọn các thành phần HTML.
Hãy bắt đầu với một cái gì đó dễ dàng.
Chúng tôi sẽ liên kết một khóa sẽ cho phép người dùng tập trung vào trường nhập tìm kiếm một cách nhanh chóng.
1. Sau đây là đánh dấu HTML cho tìm kiếm cùng với ID.
2. Tiếp theo, chúng tôi tạo một chức năng sẽ tập trung vào đầu vào tìm kiếm.
hàm tìm kiếm () var search = $ ('# search'); search.val ("); search.f Focus (); 3. Cuối cùng, chúng ta liên kết một khóa để chạy chức năng.
Mousetrap.bind ('/', tìm kiếm); 4. Đó là nó. Bây giờ bạn có thể điều hướng đến đầu vào tìm kiếm bằng cách nhấn nút /.
Thay phiên, bạn cũng có thể liên kết tổ hợp phím, Ctrl / Cmd + F, đây là một phím tắt phổ biến được sử dụng để tìm kiếm trong nhiều ứng dụng trên máy tính để bàn:
Mousetrap.bind (['lệnh + f', 'ctrl + f'], tìm kiếm);
Sử dụng Mousetrap với Bootstrap
Thật dễ dàng để tích hợp Mousetrap với một khung, ví dụ, Bootstrap. Trong ví dụ thứ hai này, chúng tôi sẽ hiển thị một cửa sổ trợ giúp sẽ hiển thị danh sách các phím tắt có sẵn trên trang web. Ở đây, tôi chọn phương thức Bootstrap để trình bày danh sách và chỉ định? chìa khóa để hiển thị phương thức.
Mặc dù? chỉ có thể truy cập bằng phím Shift, chỉ ràng buộc? chìa khóa là đủ.
Mousetrap.bind ('?', Hàm () $ ('# help'). Modal ('show');); Bây giờ khi bạn nhấn? chìa khóa, một cửa sổ bật lên sẽ xuất hiện.
Mẹo để liên kết hiệu quả
Theo thời gian, bộ sưu tập phím tắt ngày càng tăng của bạn có thể bắt đầu làm rối mã của bạn. Nếu điều này xảy ra, có một tiện ích mở rộng bạn có thể thêm để tạo “Ràng buộc chính” mã hiệu quả hơn. Nó được đặt tên là “từ điển ràng buộc”. Thêm tiện ích mở rộng này sau thư viện Mousetrap chính, mousetrap.min.js.
Bây giờ, thay vì tách từng ràng buộc khóa, chúng ta có thể nhóm chúng gọn gàng trong một .trói buộc() phương pháp, như vậy:
Mousetrap.bind ('/': search, 't': tweet, '?': Hàm modal () $ ('# help'). Modal ('show');, 'j': function next ( ) highLight ('j'), 'k': function trước () highLight ('k')); Để triển khai nâng cao hơn, bạn có thể xem bản demo mà tôi đã thực hiện. Trong bản demo, bạn có thể nhấn phím J hoặc K để tô sáng bài đăng và nhấn T để tweet bài đăng hiện tại mà bạn đã tô sáng.
- Xem bản demo
- Tải về
