iT邦幫忙

DAY 12
3

HTML5試試看系列 第 12

[HTML5試試看-12] 互動元素

嗯嗯,html5提供了details, summary, menu, command這四個標籤,作為使用者互動的UI元件。details可以再點選後提供更詳細資訊,menu則可以構成toolbar或context menu(透過滑鼠右鍵跳出)...但是今天測試一下,發現目前瀏覽器都還沒有真正在UI上支援。不過還是稍微介紹一下。
details 與 summary
從html5的文件介紹中,可以知道detailssummary主要是用一個點選後展開的block元件來提供詳細資訊,summary是details下的子元件,裡面的內容會在details未展開時就呈現。details有一個open屬性,他的值是boolean,在標籤中指定了open屬性時,這個details區塊預設就會是展開的。

在html5文件的4.11.2 The summary element之前,有一個範例解說,可以簡單地看出規格要求的效果。基於版權,不太好在這裡引用,有興趣的話還是上規格書看一看吧。

menu 與 command
在html中要做出各種選單是很複雜的,需要靠大量的CSS與Javascript才能實作。html5中制定了menucommand標籤,讓我們可以利用標籤就可以組織出選單。(不過目前瀏覽器還不支援他的視覺呈現,所以我只能簡單介紹,沒有辦法實測)

menu標籤可以定義複雜的選單結構。要定義一個toolbar,需要將最外層的menu元件的type屬性指定為"toolbar",子選單可以利用label屬性來指定顯示的名稱。用Windows的小算盤來舉例:


像這樣的toolbar選單,就可以用以下的html語法來定義:

 <menu type="toolbar">
 	<menu label="編輯(E)">
 		<command label="複製(C)			Ctrl+C">
 		<command label="貼上(P)			Ctrl+V">
 	</menu>
 	<menu label="檢視(V)">
 		<command type="radio" radiogroup="viewtype" label="標準型(T)" onclick="">
 		<command type="radio" radiogroup="viewtype" label="工程型(S)" onclick="" checked>
 		<hr>
 		<command type="radio" radiogroup="digittype" label="十六進位(H)		F5" onclick="">
 		<command type="radio" radiogroup="digittype" label="十進位(D)			F6" onclick="" checked>
 		<command type="radio" radiogroup="digittype" label="八進位(O)			F7" onclick="">
 		<command type="radio" radiogroup="digittype" label="二進位(B)			F8" onclick="">
 		<hr>
 		<command type="radio" radiogroup="numset" label="Degrees(E)			F2" onclick="" checked>
 		<command type="radio" radiogroup="numset" label="Radians(R)			F3" onclick="">
 		<command type="radio" radiogroup="numset" label="Grads(G)				F4" onclick="">
 		<hr>
 		<command label="數字分位(I)" onclick="">
 	</menu>
 	<menu label="說明(H)">
 		<command label="說明主題(H)" onclick="">
 		<hr>
 		<command label="關於小算盤(A)" onclick="">
 	</menu>
 </menu>

...不過顯示不出來就是了XD

真的想看結果:

總之就是三條黑線Orz

menu有以下屬性:
* type:可以使用的值有'toolbar', 'context', 'list'。'toolbar', 'context'代表選單會以一般功能列選單、滑鼠右鍵跳出的選單的方式呈現。指定為'list'時,裡面的元素包含li,就可以用ul標籤的方式呈現。如果裡面內容沒有li標籤,html5只規定要用[http://www.w3.org/TR/html5/content-models.html#flow-content flow content]的模式呈現
* label:作為sub menu使用時,可以指定要出現的標籤文字

command有以下屬性:
* type:可以使用的值有'command', 'radio', 'checkbox','command'是預設,可以不指定,指定成radio的話,他會以radio方式呈現,checkbox也是一樣。
* label:要出現的標籤文字
* icon:如果要在標籤文字前顯示icon,可以指定圖檔的url
* disabled:這是boolean值,在標籤中指定這個屬性的話,command應該會無法操作
* checked:如果type是radio或checkbox的話,選單出現時就會是已點選的
* radiogroup:如果type是radio,用這個就可以把radio組成群組,每次點選都只能在這個群組選擇一個(單選)

反正沒畫面,我就不再多說,沒辦法測試...

明天來先初步測試一下表單(form)好了。

參賽文章


上一篇
[HTML5試試看-11] canvas 與 3d context
下一篇
[HTML5試試看-13] 新的表單元素
系列文
HTML5試試看30

尚未有邦友留言

立即登入留言