支持鍵盤按鍵的jQuery導(dǎo)航應(yīng)用指的是什么

這篇文章給大家介紹支持鍵盤按鍵的jQuery導(dǎo)航應(yīng)用指的是什么，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

我將為您介紹如何偵聽用戶鍵盤按鍵事件，通過使用鍵盤來切換導(dǎo)航菜單，也為用戶提供了方便，從而使導(dǎo)航功能更加實(shí)用。

HTML

<p id="nav">    <ul>        <li><a href="#home">首頁[A]</a></li>        <li><a href="#about">關(guān)于[S]</a></li>        <li><a href="#product">產(chǎn)品[D]</a></li>        <li><a href="#service">服務(wù)[F]</a></li>        <li><a href="#blog">BLOG[G]</a></li>          </ul> </p> <p id="home" class="box"> <h3>Welcome!</h3> <p>Some Text</p> </p> <p id="about" class="box"> <h3>About me</h3> <p>Some Text</p> </p> <p id="product" class="box"> <h3>Product</h3> <p>Some Text</p> </p> <p id="service" class="box"> <h3>Service</h3> <p>Some Text</p> </p> <p id="blog" class="box"> <h3>My Blog</h3> <p>Some Text</p> </p>

創(chuàng)建一個(gè)包含導(dǎo)航菜單#nav和菜單對(duì)應(yīng)的內(nèi)容.box，注意導(dǎo)航菜單中含有對(duì)應(yīng)的字母就是要用到的鍵盤按鍵導(dǎo)航功能。

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代碼將導(dǎo)航菜單設(shè)置為一行，為了演示，我給每個(gè)導(dǎo)航菜單對(duì)應(yīng)的模塊內(nèi)容背景設(shè)置了不同的顏色。

jQuery

關(guān)鍵來看jQuery，首先要引用jquery庫，以及我分離出來的一個(gè)keynav.js文件。

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/keynav.js"></script>

接下來在keynav.js文件中準(zhǔn)備兩個(gè)函數(shù)，一個(gè)是當(dāng)用戶按鍵操作時(shí)用來調(diào)用的函數(shù)showViaKeypress()，當(dāng)用戶按鍵時(shí)，導(dǎo)航對(duì)應(yīng)的模塊顯示出來，其他模塊隱藏，請(qǐng)看代碼：

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

另一個(gè)函數(shù)showViaLink()，簡單的說是用一個(gè)數(shù)組處理當(dāng)用戶點(diǎn)擊導(dǎo)航菜單時(shí)，鏈接對(duì)應(yīng)的模塊。即當(dāng)用戶不使用鍵盤按鍵操作時(shí)還可以使用常規(guī)的鼠標(biāo)點(diǎn)擊方法來導(dǎo)航。

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

最后，當(dāng)頁面加載的時(shí)候，jQuery要處理以下事情：

1、除了首頁#home模塊顯示外，其他導(dǎo)航對(duì)應(yīng)的模塊都要先隱藏。

2、調(diào)用showViaLink()函數(shù)，相應(yīng)點(diǎn)擊導(dǎo)航鏈接。

3、偵聽用戶按鍵操作，調(diào)用showViaKeypress()函數(shù)，完成切換導(dǎo)航功能。

$(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”對(duì)應(yīng)的ASCII值是“97”，

關(guān)于支持鍵盤按鍵的jQuery導(dǎo)航應(yīng)用指的是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。