HTML5--details活学活用
这是补充HTML5基础知识的系列内容,其他为:
- 一、HTML5-- 新的结构元素
- 二、HTML5-- figure、time、details、mark
- 三、HTML5-- details活学活用
- 四、HTML5-- 现存元素的变化
- 五、HTML5 -- Web表单
在上一篇随笔读书笔记:《HTML5开发手册》--figure、time、details、mark中,介绍了语义化标签details
,如果还不知道其用法的可以点进去看一眼,本次就特地实战一下。
在HTML5之前,想通过纯CSS实现手风琴效果一般是借助checked
或者target
来完成,不过,HTML5提供了details
元素,我们可以光明正大的拿来做手风琴了。
现在根据这篇文章The details and summary elements来实际操作一下。
效果1:MAC版显示简介
用过mac的同学对这个界面一定很熟悉,因为这个界面和我们今天要说的details有很多相近的地方,首先,其有折叠效果,用户可以自己选择打开或关闭哪一个,其次,当我们直接打开的时候,默认会有几个标签是打开的,有一些是关闭的,而这些我们的details
都能实现。
代码地址:https://github.com/Gavin-YYC/html5demos/blob/master/html5/details-mac.html
效果预览
代码结构
<details open>
<summary>通用: </summary>
<dl>
<dt>种类:</dt><dd>便携文稿格式 (PDF)</dd>
<dt>大小:</dt><dd>121,765,394 字节(磁盘上的 121.8 MB)</dd>
<dt>位置:</dt><dd>/Users/yangyoucun/Desktop</dd>
<dt>创建时间:</dt><dd>2013年7月17日 星期三 11:37</dd>
<dt>修改时间: </dt><dd>2013年7月17日 星期三 11:37</dd>
</dl>
</details>
<details>
<summary>更多信息: </summary>
<dl>
<dt>版本: </dt><dd>1.5</dd>
<dt>页数: </dt><dd>722</dd>
<dt>分辨率: </dt><dd>631 × 835</dd>
<dt>安全性: </dt><dd>None</dd>
<dt>编码软件: </dt><dd>FreePic2Pdf - 1.26</dd>
<dt>来源: </dt><dd>jiu的MacBook Pro</dd>
</dl>
</details>
<details>
<summary>名称与拓展名: </summary>
<input type="text" name="" value="HTTP权威指南.pdf">
</details>
<details>
<summary>注释: </summary>
<textarea name="name"></textarea>
</details>
<details>
<summary>打开方式: </summary>
<select>
<option value="">预览(默认)</option>
</select>
</details>
<details open>
<summary>预览: </summary>
<img src="temp.png" alt="">
</details>
可以看到,上面代码HTML代码就已经可以实现这种折叠效果了,稍微添加了CSS就可以获得不一样的效果,完全不用去模拟实现。
另外,在我的代码中,我使用了table来展示上面的“更多信息”列表与“通用”列表,其实这并不符合语义,所以,在这里我使用了dl
来表示描述列表,即该列表的形式为'name-value',并且其是对summary的项目描述,一组元信息,所以使用dl
更加符合语义。
效果2:手风琴效果
这个效果是最为常见,通过details短短几行代码就可以实现该功能。
代码地址:https://github.com/Gavin-YYC/html5demos/blob/master/html5/details-accordion.html
效果预览
代码结构
<section>
<h1>Question List</h1>
<details>
<summary>Question 1</summary>
<p>answeransweransweransweransweransweranswerans</p>
</details>
<details open>
<summary>Question 2</summary>
<p>answeransweransweransweransweransweranswerawer</p>
</details>
<details>
<summary>Question 3</summary>
<p>answeransweransweransweransweransweransweranswerswer</p>
</details>
<details>
<summary>Question 4</summary>
<p>answeransweransweransweransweransweransansweranswer</p>
</details>
</section>
我们的折叠面板结构非常清晰,没有多余的元素节点,并且也没有任何的JavaScript代码,只需这些,我们的手风琴效果就实现了。
效果3:典型的文件程序卸载界面
这也是一个常用的应用场景,在安装或卸载程序的过程中,我们一般展示给用户具体的进度信息,对于细节一般隐藏起来,该场景便可以通过details来完成
下面看下截图:
样式优化规则:
对summary文字前面默认icon(▶
)的修饰通过如下方式完成:
// 隐藏三角符号
details summary::-webkit-details-marker {
display: none;
}
为了更好的体验,还有一些样式需要处理:
summary {
outline: none; // 1、去掉点击时的外边框
user-select: none; // 2、不能点击选中
cursor: pointer; // 3、鼠标经过效果
}
有时summary的状态和details是否有open属性有关:
details[open] summary {
// 展开时的summary样式
color: red;
background-color: blue;
}
添加过渡与动画
在展开/收缩的过程中,我们依然可以制作一些有意思的动画,注意,这里的动画主要是指内容区的动画。
HTML结构如下:
<details>
<summary>First</summary>
<div>
<p>Set the animation to run when details open</p>
</div>
</details>
css部分如下:
@keyframes slideDown {
0% {
opacity: 0;
height: 0;
}
100% {
opacity: 1;
height: 20px;
}
}
details[open] > div {
animation: slideDown 1s linear both;
overflow:hidden;
}
总结
在实际项目中,有太多的场景是需要用户来操作显示/隐藏相关内容,这也是提高用户体验的一个过程,展示重点内容,把主动权交给用户。
对于这样的场景,details都可以发挥重要的内容。
HTML5--details活学活用的更多相关文章
- JVM活学活用——调优工具
概述 工具做为图形化界面来展示更能直观的发现问题,另一方面一些耗费性能的分析(dump文件分析)一般也不会在生产直接分析,往往dump下来的文件达1G左右,人工分析效率较低,因此利用工具来分析jvm相 ...
- pandas pivot_table 活学活用实例教程
pandas pivot_table 活学活用实例教程 导入相关数据分析的库 首先进行commentTime时间进行数据预处理 查看数据类型信息 最简单的透视表 直接敲击该函数,在notebook中可 ...
- 活学活用,webapi HTTPBasicAuthorize搭建小型云应用的实践
HTTP使用BASIC认证,WebAPI使用[HTTPBasicAuthorize]标记控制器就是使用了BASIC认证. BASIC认证的缺点HTTP基本认证的目标是提供简单的用户验证功能,其认证过程 ...
- JVM活学活用——类加载机制
类的实例化过程 有父类的情况 1. 加载父类静态 1.1 为静态属性分配存储空间并赋初始值 1.2 执行静态初始化块和静态初始化语句(从上至下) 2. 加载子类静态 2.1 为静态 ...
- JVM活学活用——优化springboot
介绍 在SpringBoot的Web项目中,默认采用的是内置Tomcat,当然也可以配置支持内置的jetty,内置有什么好处呢? 1. 方便微服务部署. 2. 方便项目启动,不需要下载Tomcat或者 ...
- 活学活用wxPython基础框架
看活活用wxpython这本书,基本框架是这样子的,这里有定义输出,然后打印出整个流程,可以看到是怎样执行的,明天请假了,五一回去玩几天,哈哈,估计假期过来都忘了 import wx import s ...
- JVM活学活用——GC算法 垃圾收集器
概述 垃圾收集 Garbage Collection 通常被称为“GC”,它诞生于1960年 MIT 的 Lisp 语言,经过半个多世纪,目前已经十分成熟了. jvm 中,程序计数器.虚拟机栈.本地方 ...
- JVM活学活用——Jvm内存结构
Java内存结构: JVM内存结构主要是有三大块:堆内存.方法区和栈.堆内存是JVM中最大的一块由年轻代和老年代组成,而年轻代内存又被分为三部分,Eden空间.From Survivor空间.To S ...
- 活学活用,CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
随机推荐
- U盘安装win7系统
windows 7安装 准备 1.iso系统镜像文件(我一般选用纯净版) 2.Windows7-USB-DVD-Download-Tool-Installer-en-US(启动盘制作) 3.准备4G以 ...
- mysql8.0 安装
之前一直使用的是zabbix3.4和mariadb5.5;感觉良好!!!但是...因其他原因需要重新部署 这次规划使用zabbix4.0和mysql8.0结合使用:嗯~~应该不会错吧!!! zabbi ...
- codeforces 17D Notepad
codeforces 17D Notepad 题意 题解 TBD 更新模板(phi.欧拉降幂) 代码 #include<bits/stdc++.h> using namespace std ...
- 10条Linux 命令了解服务器当前性能
参考:http://www.infoq.com/cn/news/2015/12/linux-performance 1. uptime 如果电脑运行缓慢,执行 uptime 可以大致查看Linux服务 ...
- linux_bc命令
bc 命令: bc 命令是用于命令行计算器. 它类似基本的计算器. 使用这个计算器可以做基本的数学运算. 语法: 语法是 bc [命令开关]命令开关: -c 仅通过编译. ...
- mysql root密码忘记重置及相关注意事项
1.使用mysqld_safe --skip-grant-tables跳过授权,进入mysql操作界面或者在配置文件mysqld 添加skip-grant-tables也行,找回后需要删除..恢复原样 ...
- IIS提示出现RPC服务器不可用的解决方法
如果你运行IIS时也遇到“RPC服务器不可用”的故障提示,不妨试试我们下面的办法 依次点击“管理工具→服务→Remote Procedure Call→属性”,其默认启动类别是“自动”,但选项是灰色的 ...
- 学习笔记——并行编程Parallel
Parallel 并行运算 参考资料:http://www.cnblogs.com/woxpp/p/3925094.html 1.并行运算 使用Parallel并行运算时,跟task很像,相当于tas ...
- Kafka设计解析(十四)Kafka producer介绍
转载自 huxihx,原文链接 Kafka producer介绍 Kafka 0.9版本正式使用Java版本的producer替换了原Scala版本的producer.本文着重讨论新版本produce ...
- HDU1042 N!(大数问题,万进制)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1042 N! Time Limit: 10000/5000 MS (Java/Others) M ...