EasyUI系列学习(八)-ProgressBar(进度条)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、创建组件

1.class加载

2.js加载

<div id="pb"></div>
<script>
$(function () {
$("#pb").progressbar();
})
</script>

二、属性

<div id="pb"></div>
<script>
$(function () {
$("#pb").progressbar({
//进度条宽度，默认auto
width: "400",
//进度条高度，默认为22
height: 30,
//进度条值，默认为0
value: 60,
//设置进度条百分比模板
text: "{value}%"
});
})
</script>

生成的html

三、事件

onChange：在值更改的时候触发

<div id="pb"></div>
<script>
$(function () {
$("#pb").progressbar({
value: 60,
onChange: function (newValue, oldValue) {
console.log("新：" + newValue + "，旧：" + oldValue);
}
});
setTimeout(function () {
$("#pb").progressbar("setValue", 70);
}, 1000);
setInterval(function () {
$("#pb").progressbar("setValue", $("#pb").progressbar("getValue") + 5);
}, 1000);
})
</script>

四、方法

1.options

<div id="pb"></div>
<script>
$(function () {
$("#pb").progressbar({ });
console.log($("#pb").progressbar("options"));
})
</script>

输出的结果