EasyUI 进度条
2016-07-29 17:36
344 查看
进度条(progressbar)提供了一种显示长时间操作进度的反馈。进度可被更新以便让用户知道当前正在执行的操作。
使用 javascript 创建进度条(ProgressBar)。
获取或者设置值,我们获取当前值并且给这个组件设置一个新值。
1、用法
进度条(ProgressBar)组件可以从 html 标记创建或者编程创建。从标记创建更容易些,把 'easyui-progressbar' class 加入到 <div> 标记。<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
使用 javascript 创建进度条(ProgressBar)。
<div id="p" style="width:400px;"></div> $('#p').progressbar({ value: 60 });
获取或者设置值,我们获取当前值并且给这个组件设置一个新值。
var value = $('#p').progressbar('getValue'); if (value < 100){ value += Math.floor(Math.random() * 10); $('#p').progressbar('setValue', value); }
2、属性
名称 | 类型 | 描述 | 默认值 |
width | string | 设置进度条(progressbar)的宽度。 | auto |
height | number | 组件的高度。该属性自版本 1.3.2 起可用。 | 22 |
value | number | 百分比值。 | 0 |
text | string | 显示在组件上的文本模板。 | {value}% |
3、事件
名称 | 参数 | 描述 |
onChange | newValue,oldValue | 当值改变时触发。 |
4、方法
名称 | 参数 | 描述 |
options | none | 返回选项(options)对象。 |
resize | width | 调整组件尺寸。 |
getValue | none | 返回当前的进度值。 |
setValue | value | 设置一个新的进度值。 |
5、实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic ProgressBar - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../css/easyui.css"> <link rel="stylesheet" type="text/css" href="../css/icon.css"> <link rel="stylesheet" type="text/css" href="../css/demo.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> </head> <body> <h2>Basic ProgressBar</h2> <p>Click the button below to show progress information.</p> <div style="margin:20px 0;"> <a href="#" class="easyui-linkbutton" onclick="start()">Start</a> </div> <div id="p" class="easyui-progressbar" style="width:400px;"></div> <script> function start(){ var value = $('#p').progressbar('getValue'); if (value < 100){ value += Math.floor(Math.random() * 10); $('#p').progressbar('setValue', value); setTimeout(arguments.callee, 200); } }; </script> </body> </html>
相关文章推荐
- EasyUI 搜索框
- UIAlertController
- 国内常用的三种框架:ionic/mui/framework7对比
- B - Rescue
- EasyUI 可调整尺寸
- hdu 1242 Rescue(BFS)(犯晕)
- EasyUI 标签页
- java中如何获取Runtime.getRuntime().exec()或ProcessBuilder.start()产生的进程信息
- UILabel显示富文本
- A Beginner's Guide to Recurrent Networks and LSTMs
- EasyUI 折叠面板
- EasyUI 面板
- HDOJ 1242 Rescue(优先队列+BFS)
- Hibernate中设置query参数的方法
- UIStackView
- hd1242 Rescue (bfs+队列优先)
- UGUI 中Tab切换 InputField
- 通过UIImageView的tag为点击事件UITapGestureRecognizer传参
- UITextField 点击事件 --- 不触发键盘弹出,而触发其他事件的实现
- POJ 2533 Longest Ordered Subsequence(最长递增子序列)