2011-05-22 108 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