第16章 jQuery键盘操作.pptVIP

第16章 jQuery键盘操作 一个好的网站，必须有较好的可访问性以及可用性，因此对用户的多方便需求都应该有所考虑。例如用户的系统环境是否支持JavaScript，用户使用的是什么浏览器以及浏览器是什么版本的等。在上面的章节中也陆续对经常用到的可用性设计作了介绍，本章将介绍jQuery如何丰富用户的键盘操作，以此来提高用户访问网站的可用性，同时也提高了网站本身的易用性，使网站可以吸引更多的用户。本章首先介绍在网页上使用键盘快捷键进行网页内容的切换技术，然后使用jQuery来实现一个软键盘，方便用户输入。 16.1 键盘快捷键动态切换页面 快捷键被广泛的应用于各种桌面软件中，如Photoshop、Word等中均有大量的快捷键。使用这些快捷键，可以使用户更方便的进行想要的操作，明显的提高用户的工作效率。因此，掌握快捷键的多少以及使用的熟练程度一度成为辨别该用户是否为高手的根据。本节将介绍如何在网页上设定快捷键，使用该快捷键用户可以更加快速地切换想要看到的页面。 16.1.1 需求与最终效果 快捷键在日常的工作以及学习中会被十分频繁的使用到，不用说存在着很多高级功能快捷键的桌面软件如Photoshop、Word等，单就看看正在使用的操作系统也存在着无数实用的快捷键，如“Windows键+D”用于显示桌面，“Windows键+E”用于打开资源管理器，“Windows键+R”用于打开运行命令窗口等等。 16.1.2 HTML及CSS代码 本章将继续使用本书的测试页面（详见5.4节）进行演示。 16.1.3 jQuery代码 首先实现传统的页面中菜单操作方式，也就是通过鼠标单击各个菜单项进行对应页面内容的显示。在js目录中定义一个新的文件，名称为keypress_nav.js。该例中的jQuery代码将集中放置于此文件中。注意需要在HTML文件中添加下面一行用于导入该JavaScript文件，代码如下： script type=text/JavaScript src=js/keypress_nav.js/script 16.2 使用插件进行改进 16.1节中实现了使用键盘的快捷键切换页面内容的效果，但是，这个示例并不是完美无缺的。本节将分析上例中存在的问题，然后介绍一个强大的用于实现jQuery快捷键的插件，并使用该插件解决上例中的问题。 16.2.1 存在的问题 16.1节的示例存在一个致命的硬伤，那就是它使用的是单独的一个按键（“a”、“s”、“d”以及“f”）来设置快捷键，因此如果页面上存在需要输入这些字母的时候，将会出现不期望的结果。 16.2.2 js-hotkeys插件的使用 js-hotkeys插件是一个专门用来设定网页对用户键盘输入响应的插件，可以从其官方网站（/p/js-hotkeys）上下载其最近更新，笔者执笔时其最新版本为0.7.8。 该插件的使用也十分简单，其调用方式如下： $(expression).bind(types,options, handler); $(expression).unbind(types,options, handler); 16.2.2 js-hotkeys插件的使用 顾名思义，bind函数用于绑定快捷键，unbind函数用于解除某个快捷键的绑定。这两个函数有三个参数，其含义分别如下。 1．types：用户按键的操作类型 2．options：选项参数 3．handler：快捷键响应函数 16.2.3 使用js-hotkeys插件改进本章示例 使用js-hotkeys插件可以很容易地避免上一小节中示例的文本框内容输入与快捷键冲突的问题。 16.3 软键盘的实现 所谓软键盘，就是在电脑屏幕上虚拟显示出来一个键盘布局类似的画面，用户可以使用鼠标来实现与直接使用键盘录入相同的操作。本节介绍使用jQuery来实现软键盘的方法。 16.3.1 软键盘的使用 软键盘之所以叫“软”，其和“软件”的“软”类似。它不像真的键盘一样，是可以摸得着的。它其实可以看作一个软件，只是可以实现和键盘外设一样的功能罢了。软键盘在很多场合都可能被用到，一般出于用户方便使用的考虑或者安全的考虑。 最常见的就是输入法自带的软键盘，几乎每个输入法都会有个软键盘的按钮，单击这个按钮，就可以出现一个布局和真实的键盘几乎一模一样的键盘。 16.3.1 软键盘的使用 最常见的就是输入法自带的软键盘，几乎每个输入法都会有个软键盘的按钮，单击这个按钮，就可以出现一个布局和真实的键盘几乎一模一样的键盘。 16.3.2 准备HTML及CSS代码 本节将在本书的测试页面上创建一个登录表单，表单中的一个文本框的输入可以使用软键盘进行录入。 16.3.3 构建jQuery代码 将本节将要实现的jQuery代码定义为一