在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);
