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 相关文章推荐
ext监听事件方法[初级篇]
Apr 27 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
JS中Location使用详解
May 12 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
javascript如何创建对象
Aug 29 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 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
PHP添加MySQL数据记录代码
2008/06/07 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
Python入门篇之编程习惯与特点
2014/10/17 Python
Python中的异常处理学习笔记
2015/01/28 Python
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Python切片工具pillow用法示例
2018/03/30 Python
django加载本地html的方法
2018/05/27 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Python和Sublime整合过程图示
2019/12/25 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
毕业生如何写自我鉴定
2014/03/15 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
红歌会主持词
2015/07/02 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书