DBMNG数据库管理与应用

书籍是全世界的营养品。生活里没有书籍,就好像没有阳光;智慧里没有书籍,就好像鸟儿没有翅膀。
当前位置:首页 > 经验分享 > HTML5

HTML5强大的Details元素 .

译自:http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-the-awesome-details-element/

译者:蒋宇捷(转载请标明出处http://blog.csdn.net/hfahe)

Jeffrey Way于2011年11月17日

教程细节
概要:HTML5的Details标签
难度:初级
支持的浏览器:Chrome 12以上的版本

下载源代码 示例

        我最喜欢的HTML5新标签是details元素,它刚刚被集成到Chrome最新的12版中。我将会在今天的快速入门中展示如何来使用它。

________________________________________

        Details标签可以用来做什么?

        它本质上允许我们在点击标签时显示和隐藏内容。你一定相当熟悉这种效果,但是直到现在,它总是用Javascript实现的。想象头部之后有一个箭头,当你点击它时,下面的附加信息将会呈现。再次点击箭头内容消失。FAQ页面中经常使用这个功能。

        这儿有此类效果的一个两分钟示例(使用Ctrl+Enter键来执行Javascript脚本)。

        Details元素允许我们完全抛开Javascript。或者说,它将做到这样,因为浏览器的支持还乏善可陈。

________________________________________

        一个示例

        现在让我们深入和学习如何使用这个新标签。我们从创建一个新的details元素开始。
[html] view plaincopyprint?
  1. <details>  
  2.    
  3. </details>  
<details>
 
</details>
        然后,我们需要放入summary的内容。
[html] view plaincopyprint?
  1. <details>  
  2.    <summary> Who Goes to College? </summary>  
  3. </details>  
<details>
   <summary> Who Goes to College? </summary>
</details>
        默认情况下,浏览器理解details元素,它里面除了summary标签外的内容将会被隐藏。让我们在summary后面添加一个段落。
[html] view plaincopyprint?
  1. <details>  
  2.    <summary> Who Goes to College? </summary>  
  3.   <p> Your mom. </p>  
  4. </details>  
<details>
   <summary> Who Goes to College? </summary>
  <p> Your mom. </p>
</details>

        

        好,让我们开始一些更实用的例子。我想要使用details元素显示不同的Nettuts+文章。我们首先为每一篇文章创建一个标记。

[html] view plaincopyprint?
  1. <details>  
  2.    <summary>Dig Into Dojo</summary>  
  3.    <img src="http://d2o0t5hpnwv4c1.cloudfront.net/1086_dojo/dojo.jpg" alt="Dojo" />  
  4.    <div>  
  5.       <h3> Dig into Dojo: DOM Basics </h3>  
  6.       <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.  
  7.      </p>  
  8.    </div>  
  9. </details>  
<details>
   <summary>Dig Into Dojo</summary>
   <img src="http://d2o0t5hpnwv4c1.cloudfront.net/1086_dojo/dojo.jpg" alt="Dojo" />
   <div>
      <h3> Dig into Dojo: DOM Basics </h3>
      <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>

        下一步,我们将为它加上简单的样式。

[html] view plaincopyprint?
  1. body { font-family: sans-serif; }  
  2.    
  3. details {  
  4.   overflow: hidden;  
  5.   background: #e3e3e3;  
  6.   margin-bottom: 10px;  
  7.   display: block;  
  8. }  
  9.    
  10. details summary {  
  11.   cursor: pointer;  
  12.   padding: 10px;  
  13. }  
  14.    
  15. details div {  
  16.   float: left;  
  17.   width: 65%;  
  18. }  
  19.    
  20. details div h3 { margin-top: 0; }  
  21.    
  22. details img {  
  23.  float: left;  
  24.  width: 200px;  
  25.   padding: 0 30px 10px 10px;  
  26. }  
body { font-family: sans-serif; }
 
details {
  overflow: hidden;
  background: #e3e3e3;
  margin-bottom: 10px;
  display: block;
}
 
details summary {
  cursor: pointer;
  padding: 10px;
}
 
details div {
  float: left;
  width: 65%;
}
 
details div h3 { margin-top: 0; }
 
details img {
 float: left;
 width: 200px;
  padding: 0 30px 10px 10px;
}
        注意,为了方便,我展示的是内容显示的时候。但是当页面加载时,你将只会看到summary文本。
        如果你想要默认显示这样的状态,需要把openattribute添加到details元素里:<details open>。
        查看最终结果.
________________________________________
        结语
        这是一个相当简单的效果,但是展示出有这样一个通用的内建特性是非常棒的事情。在我们确定所有的浏览器里都可以使用details元素之前,你可以使用polyfill来提供支持。最后要注意的一件事:在这篇文章写作时,还不支持使用键盘控制内容的切换。这可能是一个未来潜在的问题。  
本站文章内容,部分来自于互联网,若侵犯了您的权益,请致邮件chuanghui423#sohu.com(请将#换为@)联系,我们会尽快核实后删除。
Copyright © 2006-2023 DBMNG.COM All Rights Reserved. Powered by DEVSOARTECH            豫ICP备11002312号-2

豫公网安备 41010502002439号