keynav jquery plugin not working
i am unable to move a highlighter div on a(any) web page whose locomotion is enabled only with the helpof the 4 arrow keys (and the fifth key(with key code of 13)) I dont know anything about what is the fifth开发者_如何学JAVA key and its purpose. I am using the keynav plugin for the purpose and some extra code for inserting the highlighter into it but all in vain
If it is the jquery.keynav plugin that you are using, then it works just fine, even with the latest jQuery (v1.6.1). In computing, the ASCII is a character encoding scheme and 13 is
the number of the ↵ (Enter) key (see ASCII Control characters).
The jQuery plugin is designed for the arrow keys ↑ ↓ ← → to move the selection box around and the ↵ key to fire the .click() event.
Here is a demo that uses the plugin. You will need to save the plugin code as jquery.keynav.js and put that file in the same directory as the demo code.
<!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>
Credit to the plugin author, where I "borrowed" the demo from :-)
加载中,请稍侯......
精彩评论