首页 > 代码库 > HTML5:Details元素
HTML5:Details元素
教程细节 • 概要:HTML5的Details标签 • 难度:初级 • 支持的浏览器:Chrome 12以上的版本 我最喜欢的HTML5新标签是details元素,它刚刚被集成到Chrome最新的12版中。我将会在今天的快速入门中展示如何来使用它。 ________________________________________ Details标签可以用来做什么? 它本质上允许我们在点击标签时显示和隐藏内容。你一定相当熟悉这种效果,但是直到现在,它总是用Javascript实现的。想象头部之后有一个箭头,当你点击它时,下面的附加信息将会呈现。再次点击箭头内容消失。FAQ页面中经常使用这个功能。 Details元素允许我们完全抛开Javascript。或者说,它将做到这样,因为浏览器的支持还乏善可陈。 ________________________________________ 一个示例 现在让我们深入和学习如何使用这个新标签。我们从创建一个新的details元素开始。 然后,我们需要放入summary的内容。 Who Goes to College? < p> Your mom. < /details> 好,让我们开始一些更实用的例子。我想要使用details元素显示不同的Nettuts+文章。我们首先为每一篇文章创建一个标记。 < summary>Dig Into Dojo < img src=http://www.mamicode.com/”http://d2o0t5hpnwv4c1.cloudfront.net/1086_dojo/dojo.jpg” alt=”Dojo” /> < h3> Dig into Dojo: DOM Basics < p>Maybe you saw that tweet: “jQuery is a gateway drug. It leads to full-on JavaScript usage.” Part of that addiction, I contend, is learning other JavaScript frameworks. And that’s what this four-part series on the incredible Dojo Toolkit is all about: taking you to the next level of your JavaScript addiction. < /p> < /div> < /details> |
详细说明:http://html5.662p.com/thread-12-1-1.html
HTML5:Details元素
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。