HTML5：Details元素

標籤：http   io   ar   os   使用   java   sp   div   on   

 

教程細節 • 概要：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://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元素