支持鍵盤按鍵的jQuery導航應用指的是什么

這篇文章給大家介紹支持鍵盤按鍵的jQuery導航應用指的是什么，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

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

HTML

<p id="nav">    <ul>        <li><a href="#home">首頁[A]</a></li>        <li><a href="#about">關于[S]</a></li>        <li><a href="#product">產品[D]</a></li>        <li><a href="#service">服務[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>

創建一個包含導航菜單#nav和菜單對應的內容.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代碼將導航菜單設置為一行，為了演示，我給每個導航菜單對應的模塊內容背景設置了不同的顏色。

jQuery

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

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

接下來在keynav.js文件中準備兩個函數，一個是當用戶按鍵操作時用來調用的函數showViaKeypress()，當用戶按鍵時，導航對應的模塊顯示出來，其他模塊隱藏，請看代碼：

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

另一個函數showViaLink()，簡單的說是用一個數組處理當用戶點擊導航菜單時，鏈接對應的模塊。即當用戶不使用鍵盤按鍵操作時還可以使用常規的鼠標點擊方法來導航。

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、調用showViaLink()函數，相應點擊導航鏈接。

3、偵聽用戶按鍵操作，調用showViaKeypress()函數，完成切換導航功能。

$(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導航應用指的是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。