0
点赞
收藏
分享

微信扫一扫

EasyUI中进度条的简单使用


场景

效果

EasyUI中进度条的简单使用_css

属性

名称

类型

描述

默认值

width

string

设置进度条(progressbar)的宽度。

auto

height

number

组件的高度。该属性自版本 1.3.2 起可用。

22

value

number

百分比值。

0

text

string

显示在组件上的文本模板。

{value}%

事件

名称

参数

描述

onChange

newValue,oldValue

当值改变时触发。

代码实例:

 


  1. $('#p').progressbar({
  2. onChange: function(value){
  3. alert(value)
  4. }
  5. });

方法

名称

参数

描述

options

none

返回选项(options)对象。

resize

width

调整组件尺寸。

代码实例:

 


  1. $('#p').progressbar('resize'); // 调整进度条为初始宽度
  2. $('#p').progressbar('resize', 350); // 调整进度条为一个新的宽度

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>

 

举报

相关推荐

0 条评论