Shulou(Shulou.com)06/02 Report--

This article introduces what the jQuery navigation application that supports keyboard buttons refers to. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

I'll show you how to listen for user keyboard keystroke events and switch navigation menus by using the keyboard, which also provides convenience for users, making navigation features more practical.

HTML

Home page [A] about [S] products [D] Services [F] BLOG [G]

Welcome!

Some Text

About me

Some Text

Product

Some Text

Service

Some Text

My Blog

Some Text

Create a content that contains the navigation menu # nav and the menu. Box, note that the corresponding letter in the navigation menu is the keyboard key navigation function to be used.

CSS

# nav {width:460px; margin:0 auto} # nav ul {list-style:none; height:24px} # nav ul li {float:left; font-size:14px; font-weight:bold} # nav ul li a {display:block; color:#369; margin-right:20px} # nav ul li a:hover {color:#f90} .box {width:400px; height:300px; margin:20px auto; padding:10px 20px; line-height:22px} .box h3 {padding:5px 10px; width:200px; background:#9cf Color:#fff} # home {background:#15add1} # about {background:#fdc700} # product {background:#f80083} # service {background:#f18300} # blog {background:#98c313}

The above CSS code sets the navigation menu to one line, and to demonstrate, I set a different color to the background of the module content corresponding to each navigation menu.

JQuery

The key to jQuery is to refer to the jquery library and a keynav.js file that I detached.

Next, prepare two functions in the keynav.js file. One is the function showViaKeypress () that is called when the user presses the key. When the user presses the key, the corresponding navigation module is displayed, and the other modules are hidden. See the code:

Function showViaKeypress (element_id) {$(".box") .css ("display", "none"); $(element_id) .slideDown ("slow");}

Another function, showViaLink (), simply uses an array to process the corresponding module when the user clicks the navigation menu. That is, when users do not use keyboard keys to operate, they can also use the conventional mouse click method to navigate.

Function showViaLink (array) {array.each (function (I) {$(this) .click (function () {var target = $(this) .attr ("href"); $(".box") .css ("display", "none"); $(target) .slideDown ("slow");}

Finally, when the page loads, jQuery handles the following things:

1. Except for the home page # home module, other navigation modules should be hidden first.

2. Call the showViaLink () function and click the navigation link accordingly.

3. Listen to the user's keystroke operation and call the showViaKeypress () function to complete the switching navigation function.

$(function () {(".box"). Css ("display", "none"); $("# home"). Css ("display", "block"); showViaLink ($("# nav ul li a")); / / listens for any navigation keypress activity $(document) .keypress (function (e) {switch (e.which) {/ / user presses the "a" case 97: showViaKeypress ("# home"); break; / / user presses the "s" key case 115: showViaKeypress ("# about"); break / / user presses the "d" key case 100: showViaKeypress ("# product"); break; / / user presses the "f" key case 102: showViaKeypress ("# service"); break; / / user presses the "g" key case 103: showViaKeypress ("# blog");}});})

Note the use of ASCII values to detect the key value pressed by the user, such as the ASCII value corresponding to the lowercase "a" is "97"

On the support of keyboard buttons of the jQuery navigation application refers to what is shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.