教程細(xì)節(jié)
• 概要：HTML5的Details標(biāo)簽
• 難度：初級
• 支持的瀏覽器：Chrome 12以上的版本
我最喜歡的HTML5新標(biāo)簽是details元素，它剛剛被集成到Chrome最新的12版中。我將會在今天的快速入門中展示如何來使用它。
________________________________________
Details標(biāo)簽可以用來做什么？
它本質(zhì)上允許我們在點擊標(biāo)簽時顯示和隱藏內(nèi)容。你一定相當(dāng)熟悉這種效果，但是直到現(xiàn)在，它總是用Javascript實現(xiàn)的。想象頭部之后有一個箭頭，當(dāng)你點擊它時，下面的附加信息將會呈現(xiàn)。再次點擊箭頭內(nèi)容消失。FAQ頁面中經(jīng)常使用這個功能。
Details元素允許我們完全拋開Javascript。或者說，它將做到這樣，因為瀏覽器的支持還乏善可陳。
________________________________________
一個示例
現(xiàn)在讓我們深入和學(xué)習(xí)如何使用這個新標(biāo)簽。我們從創(chuàng)建一個新的details元素開始。
</details>
然后，我們需要放入summary的內(nèi)容。
<details>
<summary> Who Goes to College? </summary>
< p> Your mom. </p>
< /details>
好，讓我們開始一些更實用的例子。我想要使用details元素顯示不同的Nettuts+文章。我們首先為每一篇文章創(chuàng)建一個標(biāo)記。
<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>
下一步，我們將為它加上簡單的樣式。
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;
}
注意，為了方便，我展示的是內(nèi)容顯示的時候。但是當(dāng)頁面加載時，你將只會看到summary文本。
如果你想要默認(rèn)顯示這樣的狀態(tài)，需要把openattribute添加到details元素里：。