jQuery EasyUI ProgressBar进度条组件
更新时间:2017年02月28日 17:18:52 作者:hai_cheng001
这篇文章主要为大家详细介绍了jQuery EasyUI ProgressBar进度条组件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
ProgressBar(进度条)组件,这个还是挺好玩的,我们在自己做点什么的时候经常能用到,比如上传下载文件、导入导出文档啊、载入网页等等。
应用场景很多,使用起来还很简单。
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!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 > |
执行效果:
点击下载源代码:jQuery ProgressBar进度条组件
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- jQuery EasyUI API 中文文档 - ProgressBar 进度条
- Jquery Easyui进度条组件Progress使用详解(8)
- jquery 简单的进度条实现代码
- 6款新颖的jQuery和CSS3进度条插件推荐
- 分享8款优秀的 jQuery 加载动画和进度条插件
- 基于HTML5 Ajax文件上传进度条如何实现(jquery版本)
- Javascript jquery css 写的简单进度条控件
- jQuery实现文件上传进度条特效
- Jquery进度条插件 Progress Bar小问题解决
- jQuery监听文件上传实现进度条效果的方法
- jQuery简单实现提交数据出现loading进度条的方法
- jquery-ui 进度条功能示例【测试可用】
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
相关文章
在jquery中的ajax方法怎样通过JSONP进行远程调用
这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用,需要的朋友可以参考下2014-04-04
最新评论