JQUERY UI使用者介面設計

82

|

第六章

<script>

$("div#progressbar").progressbar ();

</script>

可以看出每個作為進度條的

<div>

元素，都要交給 jQuery UI 的

progressbar()

方法管理。

設定內容格式

圖 6-2 是 jQueryUI 的

progressbar()

修改過後的 HTML 範例（這段原始碼是以 Firefox

的 Firebug 附加元件看到的）。

圖 6-2　progressbar() 方法產生的 HTML 碼

同樣地，可以使用元素的 CSS class 改變顯示效果。舉例來說，如果我們修改

<div>

元

素擁有的

ui-progressbar

CSS class，就能改變進度條的外觀，比如說像是圖 6-3 這樣把

高度設為 10 像素：

<script src = jquery.js></script>

<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css

href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<style type=text/css>

div#progressbar.ui-progressbar {

height : 10px;

}

</style>