iT邦幫忙

DAY 7
0

HTML5 & CSS3系列 第 7

30天分享(9) - HTML5 <details> & <dialog> 標籤

  • 分享至 

  • xImage
  •  

<details> 可以選擇展開內容或者關閉,
預設是標題會有個向右的三角形箭頭,
只要點三角箭頭就能隨意打開、關閉隱藏的內容,
而且只需要用到兩個標籤,不必 javascript 控制,
目前 IE 、 Firefox不支援。

以下為使用方式 :

<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<summary> 為標題的標籤,剛開始只會顯示 <summary> 裡的內容。

<p> 為要隱藏的內容,可以有數個段落。


<dialog> 跟 <details> 相似,但 <dialog> 並不能從瀏覽器操縱開闔,
預設是隱藏,加了 open 屬性才會顯現,會出現在有設此標籤的元素旁,有點類似對話框,
會自動加上黑色邊框,並將文字置中對齊,不過這標籤的屬性很少,
只是方便不用寫 CSS,就可產生個具邊框的對話文字,
目前只有 Chrome 跟 Safari 支援。

使用方式 :

<dialog open>This is an open dialog window</dialog>


上一篇
30天分享(8) - HTML5 <datalist> 標籤
下一篇
30天分享(10) - HTML5 <input> 標籤
系列文
HTML5 & CSS328
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言