jQuery EasyUI ProgressBar进度条组件

2019-11-19 17:23:10

字体：大中小

来源：转载

供稿：网友

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" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" /> <script>   $(function () {   //$.fn.progressbar.defaults.value = 30;      //想要修改进度条的颜色去css文件中去修改   $('#box').progressbar({     width : 200,    //设置进度条宽度 默认400     height : 15,    //设置进度条高度 默认22     value : 0,     //设置进度条值 默认0     text : '{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>

执行效果：