当前位置：文江博客话题详情

keynav jquery 插件不工作

发布于 2024-11-09 07:23:21 字数 123 浏览 0 评论 0原文

我无法在（任何）网页上移动荧光笔 div，其移动只能借助 4 个箭头键（和第五个键（键代码为 13））我不知道第五个键是什么及其目的。我正在使用 keynav 插件来达到目的，并使用一些额外的代码来将荧光笔插入其中，但一切都是徒劳的

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千仐 2024-11-16 07:23:21

如果您正在使用 jquery.keynav 插件，那么即使使用最新的 jQuery (v1.6.1)。在计算中，ASCII 是一种字符编码方案，13 是
↵（Enter）键的编号（请参阅ASCII 控制字符）。

jQuery 插件专为箭头键 ↑ ↓ ← → 移动选择框< /em> 周围和 ↵ 键来触发 .click()< /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>

感谢插件作者，我从那里“借用”了演示:-)

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

回复收藏 0 原文

~没有更多了~