【连载】研究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);

推荐阅读更多精彩内容