EasyUI 进度条

来源：互联网发布：赡养人类知乎编辑：程序博客网时间：2024/05/17 10:07

进度条（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 起可用。

value

number

百分比值。

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>

0 0