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的自动完成插件
Feb 03 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
javascript实现滚轮轮播图片
Dec 13 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开发框架总结收藏
2008/04/24 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
javascript奇异的arguments分析
2010/10/20 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
python用户管理系统的实例讲解
2017/12/23 Python
通过Pandas读取大文件的实例
2018/06/07 Python
python requests post多层字典的方法
2018/12/27 Python
python交换两个变量的值方法
2019/01/12 Python
python requests指定出口ip的例子
2019/07/25 Python
python opencv实现证件照换底功能
2019/08/19 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
python中re模块知识点总结
2021/01/17 Python
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
技术负责人任命书
2014/06/05 职场文书
幼儿发展评估方案
2014/06/11 职场文书
党支部工作总结2015
2015/04/01 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书