2011-05-22 166 views
1

我無法移動任何網頁上的熒光筆div,其運動只能通過4個箭頭鍵(和第五個鍵(其中鍵碼爲13)的幫助),我不會知道什麼是第五個關鍵及其目的。我使用keynav插件的目的和一些額外的代碼插入熒光筆,但所有徒勞keynav jquery插件無法正常工作

回答

1

如果是你使用的jquery.keynav插件,那麼它工作得很好,即使使用最新的jQuery( V1.6.1)。在計算中,ASCII是字符編碼方案,並且13是 的編號(回車)密鑰(請參閱ASCII Control characters)。

的jQuery插件是專爲箭頭鍵移動選擇框周圍和鍵射擊的.click()事件。

這是一個使用插件的演示。您需要將plugin code保存爲jquery.keynav.js並將該文件放在與演示代碼相同的目錄中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>Test</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
    <script src="jquery.keynav.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      $('#keynavDemo div').keynav('keynav_focusbox','keynav_box'); 
      $('#keynavDemo div:first').removeClass().addClass('keynav_focusbox'); // give first div focus (optional) 
      $('#keynavDemo div').click(function() { 
       alert('key 13'); 
      }); 
     }); 
    </script> 
    <style type="text/css"> 
     #keynavDemo { 
      position:relative; 
     } 
     .keynav_box, .keynav_focusbox { 
      position:absolute; 
      height:30px; 
      width:30px; 
      border:1px solid black; 
     } 
     .keynav_box { 
      background-color:green; 
     } 
     .keynav_focusbox { 
      background-color:red; 
     } 
    </style> 
</head> 
<body> 
    <div id="keynavDemo"> 
     <div class='keynav_box' style='left:0px'>0:0</div> 
     <div class='keynav_box' style='left:50px'>0:1</div> 
     <div class='keynav_box' style='left:100px'>0:2</div> 
     <div class='keynav_box' style='left:150px'>0:3</div> 
     <div class='keynav_box' style='left:200px'>0:4</div> 
     <div class='keynav_box' style='left:250px'>0:5</div> 
     <div class='keynav_box' style='left:300px'>0:6</div> 
     <div class='keynav_box' style='left:350px'>0:7</div> 
     <div class='keynav_box' style='left:400px'>0:8</div> 
     <div class='keynav_box' style='left:450px'>0:9</div> 
    </div> 
</body> 
</html> 

增光plugin author,在那裏我從:-)

+0

thanx的答案,現在我只是想「借」的演示中,你看到這個 ,我相信你會解決的疾苦它繼續 – Roadrunner 2011-05-24 10:36:38

+0

thanx的答案代碼現在我只想讓你看到這個 ,我相信你會解決它仍然代碼的困境 看到這個 http://stackoverflow.com/questions/6109193/jquer -keynav - 不工作,後加入新代碼 – Roadrunner 2011-05-24 10:47:26