揭秘CSS(第 1 版)
11.4.2 文档结构视图
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

构建网页版WORD

布局设计

目录树设计

正文设计

交互性设计

交互性设计

文档结构视图

“文档结构视图”功能,可以通过jQuery的动画来模拟。该功能与Word保持一致,默认情况下,目录可见。当用户点击“文档结构视图”后,隐藏目录,再次点击后,显示目录。

首先,在文章的页眉上,增加“文档结构视图”复选框,供用户点击。复选框被包含在一个label中,并为label增加id属性,以便jQuery能够根据id来捕获用户点击事件。同理,也要为复选框增加id属性,以便用户点击后,jQuery能够进行选中和取消选中。HTML代码如下:

<label id="view"><input id="show" type="checkbox" checked />文档结构视图</label>

复选框默认是选中状态,当用户点击之后,取消选中状态,并隐藏目录,再次点击后,又变为选中状态,并显示目录。jQuery代码如下:

<script>
$(function() {
   $("#view").toggle(function(){
       $("nav").hide();
       $("[id=show]:checkbox").attr("checked", false);
   },function(){
       $("nav").show();
       $("[id=show]:checkbox").attr("checked", true);
   });
});
</script>

在隐藏和显示目录时,可以直接隐藏和显示,也可以通过淡入淡出效果。为了与 word保持一致,这里采用直接隐藏和显示的方式。

而读者可以选择淡入淡出效果,这完全取决于个人的喜好。采用淡入淡出效果时,只需用 fadeOut() 替换 hide(),用 fadeIn() 替换 show() 即可。并且,可以为 fadeOut() 和 fadeIn() 提供一个时间值,来控制淡入淡出的缓慢程度。

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验