场景
效果
属性
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
width | string | 设置进度条(progressbar)的宽度。 | auto |
height | number | 组件的高度。该属性自版本 1.3.2 起可用。 | 22 |
value | number | 百分比值。 | 0 |
text | string | 显示在组件上的文本模板。 | {value}% |
事件
名称 | 参数 | 描述 |
---|---|---|
onChange | newValue,oldValue | 当值改变时触发。 代码实例:
|
方法
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回选项(options)对象。 |
resize | width | 调整组件尺寸。 代码实例:
|
getValue | none | 返回当前的进度值。 |
setValue | value | 设置一个新的进度值。 |
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
<input type="button" value="开始" onclick="start()">
<script type="text/javascript">
function start() {
var value=$("#p").progressbar("getValue");
$("#p").progressbar("setValue",value+10);
}
</script>
</body>
</html>