HTML5 新元素-progress/meter

**請利用 Chrome/Firefox檢視

HTML5 新元素 progress 與 meter 在功能上有些類似,均用以表示特定的百分比數據資料的視覺化呈現,差異在於前者適用動態的進度展現,後者適於呈現某個範例內一定比例的值,呈現出來的效果如下:


progress

ProgressBar value=0.8


progress 特別適合用來展現動態改變的進度,例如開啟一個大型檔案或是執行複雜的運算過程變化,上述圖形的設定如下:

<progress max="1.0" value="0.8">
    ProgressBar value=0.8
</progress>

這個元素設定會在網頁顯示一個進度列, max 屬性設定最大的值是 1.0 , value 表示目前的值為 0.8 ,而其中的文字於不支援 progress 元素的網頁中呈現。其中的 value 屬性值固定設為 0.8 ,因此這是靜態的畫面,通常我們會在某種程序進行中,透過 JavaScript 設定其 value 屬性,如此一來就可以建立動態的進度列效果。除了顯示動態效果,進度列經常會顯示代表程序執行進度的百分比,而 position 屬性可以讓我們取得 progress 的進度百分比值。


meter

meter value=300


如果只是要呈現表示某個特定比例的靜態數值, meter 是合適的選擇,以上的 HTML 元素設定如下:

<meter max="600" min="0" value="300"  >
    meter value=300
</meter>

其中的 max 是範圍數值中最大的可能值,而 min 則是最小的可能值,最後的 value 屬性則代表目前的值。meter 元素在畫面上顯示一個表示特定比例值的長條圖,對於呈現如意見調查之類的相關資訊非常有用。

沒有留言: