DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> HTML5:Details元素介紹
HTML5:Details元素介紹
編輯:HTML5教程     

教程細節
•        概要:HTML5的Details標簽
•        難度:初級
•        支持的浏覽器:Chrome 12以上的版本
我最喜歡的HTML5新標簽是details元素,它剛剛被集成到Chrome最新的12版中。我將會在今天的快速入門中展示如何來使用它。
________________________________________


Details標簽可以用來做什麼?
它本質上允許我們在點擊標簽時顯示和隱藏內容。你一定相當熟悉這種效果,但是直到現在,它總是用Javascript實現的。想象頭部之後有一個箭頭,當你點擊它時,下面的附加信息將會呈現。再次點擊箭頭內容消失。FAQ頁面中經常使用這個功能。

Details元素允許我們完全拋開Javascript。或者說,它將做到這樣,因為浏覽器的支持還乏善可陳。

________________________________________
一個示例
現在讓我們深入和學習如何使用這個新標簽。我們從創建一個新的details元素開始。

<details> 

 

</details>

然後,我們需要放入summary的內容。

<details>
<summary> Who Goes to College? </summary>
<p> Your mom. </p>
</details>

好,讓我們開始一些更實用的例子。我想要使用details元素顯示不同的Nettuts+文章。我們首先為每一篇文章創建一個標記。

<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;
}

 

注意,為了方便,我展示的是內容顯示的時候。但是當頁面加載時,你將只會看到summary文本。
如果你想要默認顯示這樣的狀態,需要把openattribute添加到details元素裡:。
________________________________________
結語

這是一個相當簡單的效果,但是展示出有這樣一個通用的內建特性是非常棒的事情。在我們確定所有的浏覽器裡都可以使用details元素之前,你可以使用polyfill來提供支持。最後要注意的一件事:在這篇文章寫作時,還不支持使用鍵盤控制內容的切換。這可能是一個未來潛在的問題。


 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved