keynav jQuery插件不起作用 [英] keynav jquery plugin not working

查看:81
本文介绍了keynav jQuery插件不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我无法在仅通过4个箭头键(和第5个键(键码为13)的帮助下启用了运动的(任何)网页上移动突出显示div,我不知道这是什么第五把钥匙及其目的.我为此目的使用keynav插件,并使用一些额外的代码将荧光笔插入其中,但都是徒劳的

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 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

推荐答案

如果它是 jquery.keynav 插件,即使使用最新的jQuery(v1.6.1),它也可以正常工作.在计算中,ASCII是字符编码方案,而13是 (输入)键的编号(请参见 ASCII控制字符).

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).

jQuery插件是为箭头键 设计的选择框键触发 .click() 事件.

The jQuery plugin is designed for the arrow keys to move the selection box around and the key to fire the .click() event.

这里是使用该插件的演示.您需要将插件代码另存为 jquery.keynav .js 并将该文件与演示代码放在同一目录中.

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 :-)

这篇关于keynav jQuery插件不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆