1、第8章 ProgressBar(进度条)组件学习要点:1.加载方式2.属性列表3.事件列表4.方法列表 主讲教师:李炎恢本课程由北风网和瓢城Web俱乐部提供本节课重点了解EasyUI中ProgressBar(进度条)组件的使用方法,这个组件不依赖于其他组件。一加载方式/class加载方式/JS加载调用$(#box).progressbar(value : 60,);二属性列表 progressbar属性属性名 值 说明width string 设置进度条宽度。默认为auto。height number 设置进度条高度。默认为22。value number 设置进度条值。默认为0。text st
2、ring 设置进度条百分比模版:默认value%/属性设置$(#box).progressbar(width : 400,height : 30,value : 60,text : value%,);三事件列表 Progressbar事件事件名 传参 说明onChange newValue,oldValue 在值更改的时候触发$(#box).progressbar(value : 60,onChange : function (newValue, oldValue) console.log(新: + newValue + ,旧: + oldValue);,);setTimeout(functi
3、on () $(#box).progressbar(setValue, 70);, 1000);/实现动画效果setInterval(function () $(#box).progressbar(setValue,$(#box).progressbar(getValue) + 5);, 200);三方法列表 progressbar方法/返回属性对象console.log($(#box).progressbar(options);/设置组件长度$(#box).progressbar(resize, 500);/得到组件值alert($(#box).progressbar(getValue);/设置组件值$(#box).progressbar(setValue, 80);方法名 传参 说明options none 返回属性对象resize width 组件大小getValue none 返回当前进度值setValue value 设置一个新的进度值PS:我们可以使用$.fn.progressbar.defaults重写默认值对象。$.fn.progressbar.defaults.value = 60;感谢收看本次教程!本课程是由北风网()瓢城Web俱乐部()联合提供:本次主讲老师:李炎恢谢谢大家,再见!