揭秘CSS(第 1 版)
11.4.1 交互性设计
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

构建网页版WORD

布局设计

目录树设计

正文设计

交互性设计

对于任何一个Web应用,与用户互动是最基本的要求。为Web应用增加交互性,最常用的方法,莫过于使用 Javascript 或 jQuery、AJAX 了。

本节不打算详细介绍这几种技术,只是简要介绍在网页版 word 中,如何使用这些技术来实现目录展开折叠功能、文档结构视图功能、键盘翻页功能。这些功能看似不起眼,却非常实用,可以大大提高网页版 word 的易用性,增强用户体验。

目录展开折叠

如果目录树较长,经常需要滚动,才能找到想要的内容,使用起来极其不便。一个很人性化的功能,就是可以全部展开和全部收起整个目录。

幸运的是,dtree 提供了两个方法,一个是 openAll() 方法,用于展开所有的节点,一个是 closeAll() 方法,用于收起所有的节点。

我们只需定义两个链接,当点击链接时,分别调用调用 openAll() 和 closeAll() 方法,便可轻松实现目录全部展开和全部收起功能。

可以使用文本链接,也可以使用图像 map。这里使用图像 map 实现,在图像上指定区域提供链接,供用户点击。需要注意的是,map 元素中 name 属性的值,必须与左栏顶部图像中 map 属性的值相对应。HTML代码如下:

<map name="oAll">
    <area shape="rect" coords="0,0,22,24"  href="javascript: tree.openAll();">
    <area shape="rect" coords="22,0,44,24" href="javascript: tree.closeAll();">
</map>

可以为 map 中的 area 元素提供 title 属性,如,title = "全部展开"。这样用户鼠标悬停到map的链接区域后,可以提醒用户,点击这里可以全部展开、或全部收起整个目录。

现在,用户点击左栏顶部图像的左半部分,就可以展开整个目录,点击右半部分,就可以收起整个目录。全部展开的运行结果如图 11‑19 所示:

全部展开
图11-19 全部展开

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验