Jquery Easyui进度条组件Progress使用详解(8)


Posted in Javascript onMarch 26, 2020

本文实例为大家分享了Jquery Easyui进度条组件的实现代码,供大家参考,具体内容如下

加载方式

Class加载

<div class="easyui-progressbar" data-options="value:60" style="width:400px;">
</div>

JS调用加载

<div id="box" style="width: 400px;"></div>
<script>
 $(function () {
 $('#box').progressbar({
   // 设置进度条宽度
   width : '200',
   // 设置进度条高度
  height : '100',
  //设置进度条值
  value : '60',
  // 设置进度条百分比模版
  text: '百分之{value}'
 });
 });

</script>

属性列表

Jquery Easyui进度条组件Progress使用详解(8)

事件列表

Jquery Easyui进度条组件Progress使用详解(8)

<script>
  $(function () {
  $('#box').progressbar({
   // 设置进度条宽度
   width : '200',
   // 设置进度条高度
   height : '100',
   //设置进度条值
   value : '60',
   // 设置进度条百分比模版
   text: '百分之{value}',
   // 在值更改的时候触发
   onChange:function (newValue,oldValue) {
   console.log("新值:"+newValue);
   console.log("旧值:"+oldValue);
   },
  });
  });

 </script>

方法列表

Jquery Easyui进度条组件Progress使用详解(8)

<script>
  $(function () {
  $('#box').progressbar({
   value : '40',
   onChange : function (newValue, oldValue) {
   console.log('新:' + newValue + ',旧:' + oldValue);
   },
  });

  // 返回属性对象
  console.log($('#box').progressbar('options'));
  // 设置组件大小(宽度)
  $('#box').progressbar('resize','500');
  // 返回当前进度值
  console.log($('#box').progressbar('getValue'));
  // 设置一个新的进度值
  $('#box').progressbar('setValue','50');
  // 可以使用$.fn.progressbar.defaults 重写默认值对象。
  $.fn.progressbar.defaults.value = '60';
  });

 </script>

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

Javascript 相关文章推荐
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
详解Jquery的事件操作和文档操作
Dec 19 #Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 #Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 #Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 #Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 #Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 #Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 #Javascript
You might like
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
第四章 php数学运算
2011/12/30 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
PHP会话控制实例分析
2016/12/24 PHP
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
python控制台中实现进度条功能
2015/11/10 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
《美丽的彩虹》教学反思
2014/02/25 职场文书
党员干部承诺书范文
2014/03/25 职场文书
研修心得体会
2014/09/04 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
技术员岗位职责范本
2015/04/11 职场文书
企业员工辞职信范文
2015/05/12 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
最新最全的手机号验证正则表达式
2022/02/24 Javascript