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 上开源。
CSS Word的文档结构视图设计相关推荐
- 关于用html语言生成word格式文档的视图问题
接到一个需求,要生成word格式的说明文档,并且要和本地的office版本无关.一开始还是考虑用com组件编程,想写一个工厂,用来判断当前系统的office版本,以实现兼容,但浅尝辄止.主要是在命名空 ...
- navicat 复制表结构到word文档做数据库设计格式问题解决
需求:写数据库设计文档,需要设计数据字典,贴表结构,如果是几百张表 一个个填工作量很大 解决方案: 1.sql查询所有字段 2.整体复制到excel 3.拆分表,调整列项及字段自动编号 4.复制到wo ...
- 通过css类/选择器选取元素 文档结构和遍历 元素树的文档
通过css类选取元素 html所有的元素拥有class属性,该属性会对元素进行分组,标识为某一组. js中使用className属性来保存HTML的class的属性值 var NodeList = d ...
- 基于MFC多文档多视图结构的OGRE指北针程序
基于MFC多文档多视图结构的OGRE指北针程序 0.前沿 作者: 化凡 QQ: 371691096 Mail:zhixu_07@163.com 1. 功能描述 本程序作为OGRE和MFC结合,欲实现 ...
- html5打开word文档结构,word怎样设置文档结构图的两种方法
当我们编辑数据文字量巨大的文档的时候,我们需要把握整个文档的脉络,对整篇文档进行修改.这就需要我们运用文档结构图快速定位文档.那么下面就由学习啦小编给大家分享下word文档设置文档结构图的技巧,希望能 ...
- html(+css)/01/html语言基础,标记,标记语法,html文档结构
厚积薄发 html(+css)/01/html语言基础,标记,标记语法,html文档结构 工资:4500元左右/月 最好的学习html的方法,就是多参考别人的网页源代码: 查看源代码: 1,打开网页/ ...
- css html 高仿word 格式,制作的可编辑的微软Word样式文档 HTML-Sheets-of-Paper
这是一款使用HTML和CSS3制作的可编辑的微软Word样式文档.该特效提供一组预定义的样式,用于在WEB页面中生成各种尺寸的Word样式的文档效果.它提供的样式包括: sheets-of-paper ...
- 设置word打开文档时默认使用“文档结构图”视图
[转]用word2007打开文档时,默认使用"文档结构图" 在编辑或查看较长的Word文档时,"文档结构图"是必不可少的功能,不过不知道为什么,最近我的word ...
- html格式文档结构保存数据库6,freeCAD文档结构
一个freecad文档包含了你场景中的所有物体.它可以包含组及任何工作平台制造的物体.你可以切换工作台,但是它仍然工作在同一个文档上.当您保存您的工作时,该文件就被保存到磁盘上.你可以同时打开多个fr ...
最新文章
- 亚马逊云服务(AWS)云原生自研处理器首次落地中国区域!
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- 垃圾热解气化工艺的电气、仪表及控制系统设计
- 学习android开发中遇到的一些小问题
- TCP连接(Time_Wait、Close_Wait)说明
- Java框架篇---spring aop两种配置方式
- Apriori进行关联分析
- VB讲课笔记07:控制结构
- 使用Visio2003更新SQL2005数据库
- Python 监控linux之dstat
- 物联网智慧校园建设系统源码
- 接口测试工具Hoppscotch
- Airflow PythonOperator、BashOperator以及Xcom使用
- 周进院长担任EVO ICL导师,理论+实践培训学员技能
- 【新书速递】流量运营教科书
- mv或者cp带小括号文件名解析问题总结
- Ext JS从零开始之二
- python安装opencc包失败
- Program received signal SIGSEGV, Segmentation fault.
- 以太坊之Windows DApp开发环境的搭建
热门文章
- 微软再现宕机事故 部分用户9天无法使用电邮
- django生成文件txt、pdf(在生成 PDF 文件之前,需要安装 ReportLab 库)
- workplace background
- python模块介绍-asyncore 异步socket处理器
- IIFP之牛刀小试(初识篇)
- 如何编译sqlite-3.5.9
- 对A1A2A10B1B2N12排序
- pytorch学习笔记(4):tensorboard可视化
- c语言学生管理系统write to a text file,语言编程学生成绩管理系统.doc
- 关于Python的一些学习笔记(小白式笔记,持续更新)