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 相关文章推荐
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
Node.js Domain 模块实例详解
Mar 18 Javascript
Paypal支付不完全指北
Jun 04 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
详解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使用SOAP扩展实现WebService的方法
2016/04/01 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
python使用电子邮件模块smtplib的方法
2016/08/28 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
小松树教学反思
2014/02/11 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
交通事故协议书范文
2014/04/16 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
村委会贫困证明范本
2014/09/17 职场文书
入党函调证明材料
2014/12/24 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL