【连载】研究EasyUI系统——组件构造形式

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