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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
javascript的console.log()用法小结
May 31 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 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
回帖脱衣服的图片实现代码
2014/02/15 PHP
php文件下载处理方法分析
2015/04/22 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
php格式化json函数示例代码
2016/05/12 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
python使用cookie库操保存cookie详解
2014/03/03 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
Linux内核产生并发的原因
2012/07/13 面试题
工程业务员岗位职责
2013/12/31 职场文书
小学国庆节活动方案
2014/02/11 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
品质保证书格式
2015/02/28 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
小学教师教育随笔
2015/08/14 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书