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

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

目录展开折叠

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

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

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

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



  1. <map name="oAll">
  2.  <area shape="rect" coords="0,0,22,24"  href="javascript: tree.openAll();">
  3.  <area shape="rect" coords="22,0,44,24" href="javascript: tree.closeAll();">
  4. </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 上开源。



 
如果本教程对您帮助很大，请随意打


                
        
        
     
          



 
更多推荐


网页交互性设计