教程細(xì)節(jié)

• 概要：HTML5的Details標(biāo)簽

• 難度：初級(jí)

• 支持的瀏覽器：Chrome 12以上的版本

我最喜歡的HTML5新標(biāo)簽是details元素，它剛剛被集成到Chrome最新的12版中。我將會(huì)在今天的快速入門中展示如何來使用它。

________________________________________

Details標(biāo)簽可以用來做什么？

它本質(zhì)上允許我們?cè)邳c(diǎn)擊標(biāo)簽時(shí)顯示和隱藏內(nèi)容。你一定相當(dāng)熟悉這種效果，但是直到現(xiàn)在，它總是用Javascript實(shí)現(xiàn)的。想象頭部之后有一個(gè)箭頭，當(dāng)你點(diǎn)擊它時(shí)，下面的附加信息將會(huì)呈現(xiàn)。再次點(diǎn)擊箭頭內(nèi)容消失。FAQ頁面中經(jīng)常使用這個(gè)功能。

Details元素允許我們完全拋開Javascript。或者說，它將做到這樣，因?yàn)闉g覽器的支持還乏善可陳。

________________________________________

一個(gè)示例

現(xiàn)在讓我們深入和學(xué)習(xí)如何使用這個(gè)新標(biāo)簽。我們從創(chuàng)建一個(gè)新的details元素開始。

</details>

然后，我們需要放入summary的內(nèi)容。

<details>

<summary> Who Goes to College? </summary>

<p> Your mom. </p>

</details>

好，讓我們開始一些更實(shí)用的例子。我想要使用details元素顯示不同的Nettuts+文章。我們首先為每一篇文章創(chuàng)建一個(gè)標(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: “jQueryis 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>

下一步，我們將為它加上簡單的樣式。

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。