在EasyUI框架中，大部分組件的構造形式有兩種，一是html標簽形式，二是JavaScript代碼形式（以下簡稱JS形式）。然而不管哪種形式，組件都是基于html標簽而建立的，例如上面的ProgressBar組件就是基于<div>標簽（事實上，大多數組件都是基于<div>標簽）。
以ProgressBar為例介紹一下組件構造形式。
html構造形式
<div class="easyui-progressbar" data-options="text:'進度{value}%'"> </div>
JS構造形式
<div id="pb" class="easyui-progressbar"></div>
<script>
$("#pb").progressbar({
text:'進度{value}%'
});
</script>
每個組件都有屬性、方法和事件。
組件屬性
$("#組件id").組件名稱({
屬性名:屬性值
});
例子：
$("#pb").progressbar({
value:0,
text:'已完成{value}%'
});
說明：屬性值可以是數字、布爾值、字符串，甚至是數組。
組件事件
$("#組件id").組件名稱({
事件名稱:function(參數…) {
處理代碼……
}
});
例子：
$("#pb").progressbar({
onChange:function(newValue, oldValue) {
alert("已從"+oldValue+"變為"+newValue)
}
});
組件方法
$("#組件id").組件名稱(方法名稱，參數);
例子：
$("#pb").progressbar("resize",200);
