曾幾何時,我們創建可以顯示/隱藏一些內容的小組件時,我們不得不使用Javascript.有時候你可能不得不為這個小功能,下載一個完整的 JS 庫才能達到這個功能效果.為下面的時刻歡呼吧!HTML5提供了創建這種拖拽特點的方法,我們僅僅需要簡單的幾行html代碼就能獲得這種效果(從目前而言,這種效果還依賴于使用的瀏覽器,當然,在不久的將來,這可能不是問題).下面讓我們一起來看看 <detail>元素.
下面就是規范中的描述
The
— WHATWG HTML5 specificationdetails
element represents a disclosure widget from which the user can obtain additional information or controls.
理論上我們可以用它創建那種折疊的小組件,用戶可以有打開和關閉的交互.在<details>我們可以放入我們任何想放入的內容.
瀏覽器的支持情況
在我們開始之前,實際一點,讓我們看看目前瀏覽器的支持情況,目前只有chrome支持 <details > 元素.Opera很快就會支持Opera will support it soon,讓我們來用chrome演示這種效果吧.
<details 的使用方法
這里有兩個相關的元素:<details>和可選的
讓我們來看下面的代碼:
1 2 3 4 <details>
<summary>Show/Hide
me</summary>
<p>Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.</p>
</details>
你可以通過下面的鏈接察看效果see this in action over at jsbin.這是一個簡單的例子但是可以將效果完美展現的代碼,沒有任何Javascript.
OPen 屬性
在上面的例子中,在頁面加載的時候內容是隱藏的。我們可以將<detail>默認的視覺屬性通過布爾值作修改,讓其當我們加載頁面的時候是展開的:
1
2 3 4 <details open>
<summary>Show/Hide
me</summary>
<p>Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.</p>
</details>
注意,這里并沒有 closed 屬性,因為只要你移除 open 屬性,執行的就是 closed 屬性效果。
<summary>元素
我們已經簡要的看了
的作用。因為它是短語內容,我們可以使用內聯
(inline)標簽 <span;>。我們為什么會有這種想法呢?也許這樣子能更方便的通過而外樣式控制顯示效果或者像 spec
建議的那樣:為一個表單元素增加一個 <label>標簽。如果他能生效的話,至少能讓我很順手:
1 2 3 4 <details>
<summary><label
for="name">Name:</label></summary>
<input type="text"
id="name" name="name" />
</details>
常理看,我們點擊 summary 的任何位置都應該展開
<detail>元素的內容。但是在這個例子中,我們點擊<summary>并沒有展開內容,因為你點擊的是<label>他會將焦點放到
<input>標簽-即使那部分內容被隱藏在<details>標簽。
很明顯,在這點需要更好的聲明,你認為這個地方應該發生什么事情呢?可能某個瀏覽器生產商能看一下這個效果。
<details>元素多層嵌套
你可以在<details>中嵌套<details>,可以完美的案例查看這個效果:
1 2 3 4 5 6 7 8 9 10
11 12 13 <details>
<summary>Question
1</summary>
<p><strong>Pellentesque habitant morbi
tristique</strong> senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi
vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et
sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
<code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum,
elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar
facilisis. Ut felis.</p>
<details>
<summary>Related
documents</summary>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.</a></li>
<li><a
href="#">Aliquam tincidunt mauris eu risus.</a></li>
<li><a
href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.</a></li>
<li><a href="#">Aliquam tincidunt mauris eu
risus.</a></li>
</ul>
</details>
</details>
使用案例
在哪些情況時會用到 <details>?FAQ表可能是我們最先涌現的想法。大家經常使用手風琴效果是用在FAQ列表,所以
<details>
是這一效果的最佳效果。
考慮到這一系列內容,它可能被固定在某一區域,當我們滾動內容的時候。像這樣子?
你也可以使用<details>來操作博客的評論內容,用戶簡介,下載列表,復雜的表單,或者像規范中描述下面的應用:
An
example of the <details>
element from the spec
實際上,只要你看看我寫的wordpress,會發現有大量的使用 <details>的機會。讓我們在評論中了解一下你的觀點和想法。
樣式格式化
你如何對這個定義樣式?同時,在webkit瀏覽器中我們可以使用偽類樣式
::-webkit-details-marker
。你可以看到這個小的案例:
1 2 3 4 5 details summary::-webkit-details-marker {
background: red;
color: #fff;
font-size:
500%;
}
我們也可以將這個小組件定位。這里是向右浮動的這就是我們初始化效果。
我們如何將默認的組件Icon自定義呢?那就是用 屬性選擇器 (attribute
selector),你可以用來檢測
<details>元素是打開的還是關閉的,然后為其定義一個合適的背景圖片。我們咋下面的例子中作了一個類似的效果,使用 :after
pseudo-element
元素定義成我們喜歡的背景圖片:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
17 18 19 summary::-webkit-details-marker {
display: none
}
summary:after {
background: red;
border-radius: 5px;
content: "+";
color: #fff;
float: left;
font-size: 1.5em;
font-weight:
bold;
margin:
-5px 10px 0 0;
padding: 0;
text-align: center;
width: 20px;
}
details[open]
summary:after {
content: "-";
}
在上面的例子中,我們使用文本 “+”和“-”來定義這個組件的狀態,根據你的設計需要,你可能希望使用 :before
來代替
:after
,這兩個為類元素都可以使用
image.
details的[open]屬性選擇器能創造很多有意思的可能性。因為我們是好醫生,下面是我們裝飾后的效果,下面是截屏效果:
Styled
<details>
element in Chrome
如果我們可以用過css的動畫效果來修飾打開和關閉時的狀態,這樣設計就更完美了,但是目前為止我們還沒有辦法做到這點。
可訪問性
不幸的是在我們寫這篇文章的時候,<details>h還無法通過鍵盤訪問,Steve Faulkner 寫到:
Bottom line is, currently no keyboard support and no usable information exposed to assistive technology.
自己試一下,如果你使用鼠標打開 <details> 元素,你可以使用鍵盤到達內容部分,但是你無法使用鍵盤打開和關閉區域。所以目前這并不是理想狀態,不過我們相信這個小國很快會被改進。
向后兼容
在我們抱怨其在IE6中無法生效之前,感謝這些聰明的人們,我們可以提供優雅的像狗兼容。這些效果也被列在下面的網站very handy collection of cross-browser polyfills,這兩個都需要 jQuery:
<details>
fallback via jQuery by Mathias
Bynens Another <details>
alternative, also based on jQuery by Manuel Bieh 1 2 3 4 5 <script>
if (!('open' in
document.createElement('details'))) {
alert("No details");
}
</script>
更新:感謝的評論。上面的代碼并不是100%可靠,因為他在某些chrome版本下會失敗。你可以使用this Modernizr snippet。
我們為何使用這種類型的交互?
言歸正傳,為什么會有這個效果在HTML5中?就像其它HTML5的效果,使用這種效果能夠更簡單。比如時間選擇,Date pickers, sliders, progress indicators, 現在這種手風琴效果就可以在不使用JavaScript的情況下更方便實施。誰能想到下一個是什么?如果是 tabs 標簽那就好了。
總結
在這篇文章中,我們闡述了如何去使用<details>和<summary>元素。<details>是一個新元素,通過和<summary>元素通過瀏覽器可以創造手風琴的交互效果。
目前,<details>只能在 Chrome 工作,不過我們期待這會在不久的將來有所改變。這里只有一個css trick我們可以使用
::-webkit-details-marker
,但是我們擁有很多的其它css。讓我們在評論中知道關于<details>元素你在這方面的經驗和想法。
中文原文:details 和 summary 元素
英文原文:The details and summary
elements
Tag: 設計公司 |
網頁設計公司 | 廣告公司 | 網站設計
| 平面設計
| 互動媒體
| 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作
| 網上商店 | 網上宣傳
| 網頁服務 |
留言列表