文档介绍：第16章 jQuery键盘操作
一个好的网站,必须有较好的可访问性以及可用性,因此对用户的多方便需求都应该有所考虑。例如用户的系统环境是否支持JavaScript,用户使用的是什么浏览器以及浏览器是什么版本的等。在上面的章节中也陆续对经常用到的可用性设计作了介绍,本章将介绍jQuery如何丰富用户的键盘操作,以此来提高用户访问网站的可用性,同时也提高了网站本身的易用性,使网站可以吸引更多的用户。本章首先介绍在网页上使用键盘快捷键进行网页内容的切换技术,然后使用jQuery来实现一个软键盘,方便用户输入。
键盘快捷键动态切换页面
快捷键被广泛的应用于各种桌面软件中,如Photoshop、Word等中均有大量的快捷键。使用这些快捷键,可以使用户更方便的进行想要的操作,明显的提高用户的工作效率。因此,掌握快捷键的多少以及使用的熟练程度一度成为辨别该用户是否为高手的根据。本节将介绍如何在网页上设定快捷键,使用该快捷键用户可以更加快速地切换想要看到的页面。
需求与最终效果
快捷键在日常的工作以及学****中会被十分频繁的使用到,不用说存在着很多高级功能快捷键的桌面软件如Photoshop、Word等,单就看看正在使用的操作系统也存在着无数实用的快捷键,如“Windows键+D”用于显示桌面,“Windows键+E”用于打开资源管理器,“Windows键+R”用于打开运行命令窗口等等。
HTML及CSS代码
本章将继续使用本书的测试页面()进行演示。
jQuery代码
首先实现传统的页面中菜单操作方式,也就是通过鼠标单击各个菜单项进行对应页面内容的显示。在js目录中定义一个新的文件,。该例中的jQuery代码将集中放置于此文件中。注意需要在HTML文件中添加下面一行用于导入该JavaScript文件,代码如下:
<script type="text/JavaScript" src="js/"></script>
使用插件进行改进
,但是,这个示例并不是完美无缺的。本节将分析上例中存在的问题,然后介绍一个强大的用于实现jQuery快捷键的插件,并使用该插件解决上例中的问题。
存在的问题
,那就是它使用的是单独的一个按键(“a”、“s”、“d”以及“f”)来设置快捷键,因此如果页面上存在需要输入这些字母的时候,将会出现不期望的结果。
js-hotkeys插件的使用
js-hotkeys插件是一个专门用来设定网页对用户键盘输入响应的插件,可以从其官方网站(http://code./p/js-hotkeys)上下载其最近更新,。
该插件的使用也十分简单,其调用方式如下:
$(expression).bind(<types>,<options>, <handler>);
$(expression).unbind(<types>,<options>, <handler>);
js-hotkeys插件的使用
顾名思义,bind函数用于绑定快捷键,unbind函数用于解除某个快捷键的绑定。这两个函数有三个参数,其含义分别如下。
1.<types>:用户按键的操作类型
2.<options>:选项参数
3.<handler>:快捷键响应函数
使用js-hotkeys插件改进本章示例
使用js-hotkeys插件可以很容易地避免上一小节中示例的文本框内容输入与快捷键冲突的问题。