支持鍵盤按鍵的jQuery導航應用指的是什么-創(chuàng)新互聯(lián)
這篇文章給大家介紹支持鍵盤按鍵的jQuery導航應用指的是什么，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
我將為您介紹如何偵聽用戶鍵盤按鍵事件，通過使用鍵盤來切換導航菜單，也為用戶提供了方便，從而使導航功能更加實用。
HTML
Welcome!
Some Text
About me
Some Text
Product
Some Text
Service
Some Text
My Blog
Some Text
創(chuàng)建一個包含導航菜單#nav和菜單對應的內(nèi)容.box，注意導航菜單中含有對應的字母就是要用到的鍵盤按鍵導航功能。
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}
以上CSS代碼將導航菜單設置為一行，為了演示，我給每個導航菜單對應的模塊內(nèi)容背景設置了不同的顏色。
jQuery
關鍵來看jQuery，首先要引用jquery庫，以及我分離出來的一個keynav.js文件。
接下來在keynav.js文件中準備兩個函數(shù)，一個是當用戶按鍵操作時用來調(diào)用的函數(shù)showViaKeypress()，當用戶按鍵時，導航對應的模塊顯示出來，其他模塊隱藏，請看代碼：
function showViaKeypress(element_id){
$(".box").css("display","none");
$(element_id).slideDown("slow");
}
另一個函數(shù)showViaLink()，簡單的說是用一個數(shù)組處理當用戶點擊導航菜單時，鏈接對應的模塊。即當用戶不使用鍵盤按鍵操作時還可以使用常規(guī)的鼠標點擊方法來導航。
function showViaLink(array){
array.each(function(i){
$(this).click(function(){
var target = $(this).attr("href");
$(".box").css("display","none");
$(target).slideDown("slow");
});
});
}
最后，當頁面加載的時候，jQuery要處理以下事情：
1、除了首頁#home模塊顯示外，其他導航對應的模塊都要先隱藏。
2、調(diào)用showViaLink()函數(shù)，相應點擊導航鏈接。
3、偵聽用戶按鍵操作，調(diào)用showViaKeypress()函數(shù)，完成切換導航功能。
$(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");
}
});
});
注意使用ASCII值，偵聽到用戶按下的鍵值，如小寫的“a”對應的ASCII值是“97”，
關于支持鍵盤按鍵的jQuery導航應用指的是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
名稱欄目：支持鍵盤按鍵的jQuery導航應用指的是什么-創(chuàng)新互聯(lián)
當前鏈接：http://m.jiaotiyi.com/article/ddphdh.html