快速业务通道

HTML5教程:如何使用details元素和summary元素

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-23

曾几何时,我们创建可以显示/隐藏一些内容的小组件时,我们不得不使用Javascript.有时候你可能不得不为这个小功能,下载一个完整的 JS 库才能达到这个功能效果.为下面的时刻欢呼吧!HTML5提供了创建这种拖拽特点的方法,我们仅仅需要简单的几行html代码就能获得这种效果(从目前而言,这种效果还依赖于使用的浏览器,当然,在不久的将来,这可能不是问题).下面让我们一起来看看 <detail>元素.

下面就是规范中的描述

The details element represents a disclosure widget from which the user can obtain additional information or controls.

WHATWG HTML5 specification

理论上我们可以用它创建那种折叠的小组件,用户可以有打开和关闭的交互.在<details>我们可以放入我们任何想放入的内容.

浏览器的支持情况

在我们开始之前,实际一点,让我们看看目前浏览器的支持情况,目前只有chrome支持 <details > 元素.Opera很快就会支持Opera will support it soon,让我们来用chrome演示这种效果吧.

<details 的使用方法

这里有两个相关的元素:<details>和可选的
让我们来看下面的代码:

1 2 3 4 <details>   <summary>Show/Hide me</summary>   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </details>

你可以通过下面的链接察看效果see this in action over at jsbin.这是一个简单的例子但是可以将效果完美展现的代码,没有任何Javascript.

OPen 属性

在上面的例子中,在页面加载的时候内容是隐藏的。我们可以将<detail>默认的视觉属性通过布尔值作修改,让其当我们加载页面的时候是展开的:

1 2 3 4 <details open>   <summary>Show/Hide me</summary>   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </details>

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号