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 相关文章推荐
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 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
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
存储过程的优点有哪些
2012/09/27 面试题
项目总经理岗位职责
2014/02/14 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
社区春季防火方案
2014/06/02 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
防汛工作情况汇报
2014/10/28 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
nginx 配置缓存
2022/05/11 Servers