jQuery EasyUI ProgressBar进度条组件


Posted in Javascript onFebruary 28, 2017

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>

执行效果:

jQuery EasyUI ProgressBar进度条组件

点击下载源代码:jQuery ProgressBar进度条组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 #Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 #Javascript
AngularJS constant和value区别详解
Feb 28 #Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 #Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 #Javascript
Vue.js父与子组件之间传参示例
Feb 28 #Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 #Javascript
You might like
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中的下划线详解
2015/06/24 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python贪吃蛇游戏代码
2020/04/18 Python
详解Python文件修改的两种方式
2019/08/22 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
Django-imagekit的使用详解
2020/07/06 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
会议活动邀请函
2014/01/27 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL