jQuery Easy UI ProgressBar（进度条）组件

来源：互联网发布：易建联新秀数据编辑：程序博客网时间：2024/06/05 13:46

ProgressBar（进度条）组件，这个还是挺好玩的，我们在自己做点什么的时候经常能用到，比如上传下载文件、导入导出文档啊、载入网页等等。

应用场景很多，使用起来还很简单。

示例：

<!DOCTYPE html><html><head><title>jQuery Easy UI</title><meta charset="UTF-8" /><script type="text/javascript" src="easyui/jquery.min.js"></script><script type="text/javascript" src="easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script><link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css" /><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /><script>$(function () {//$.fn.progressbar.defaults.value = 30;//想要修改进度条的颜色去css文件中去修改$('#box').progressbar({width : 200,//设置进度条宽度 默认400height : 15,//设置进度条高度 默认22value : 0,//设置进度条值 默认0text : '{value}%',//设置进度条百分比模板 默认 {value}%//在value改变的时候触发onChange : function (newValue, oldValue) {console.log('新:' + newValue + ',旧:' + oldValue);},});/*setTimeout(function () {$('#box').progressbar('setValue', 70);}, 1000);*/setInterval(function () {//getValue  setValue 分别是返回当前进度值  和 设置一个进度值$('#box').progressbar('setValue', $('#box').progressbar('getValue') + 5);}, 1000);console.log($('#box').progressbar('options'));//$('#box').progressbar('resize', 80);没啥大用});</script></head><body style="margin:100px;"><!--<div class="easyui-progressbar" data-options="value:60" style="width:400px"></div>--><div id="box"  ></div></body></html>

执行效果：

点击下载源代码

1 0