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 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
js浮动图片的动态效果
Jul 10 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
javascript中如何判断类型汇总
May 14 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
使用jQuery实现购物车
Oct 29 jQuery
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 模拟$_PUT实现代码
2010/03/15 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
浅析PHP开发规范
2018/02/05 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
Python Flask-web表单使用详解
2017/11/18 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
python3实现弹弹球小游戏
2019/11/25 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
安卓程序员求职信
2014/02/28 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
app场景下uniapp的扫码记录
2022/07/23 Java/Android