jQuery EasyUI - 进度条

最新推荐文章于 2024-02-17 21:45:02 发布

原创最新推荐文章于 2024-02-17 21:45:02 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #后端 #ViewUI

Easy UI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用jQuery EasyUI库中的进度条控件。包括进度条的基本使用方法，如创建进度条、设置和获取进度值等。同时，还提供了一个完整的示例，展示如何通过定时请求更新进度条的状态。

源：http://www.cnblogs.com/hantianwei/archive/2012/03/19/2407043.html
评：

function progressbar() {
$('#progressbarDiv').window({closable:false});
$("#progressbarDiv").window("open");
$("#progressbarDiv").css("display", "block");
$('#p').progressbar('setValue', 1);
str = "selIds:" + selIds + ";num:" + num;
//$.messager.alert("aa", str);
//getRateAjax();
//setTimeout(getRateAjax, 400);
timer = setInterval("getRateAjax()", 100);

}

function getRateAjax() {
callcount++;
//$.messager.alert("aa", "callcount:" + callcount);
$.ajax({
type: "post",
url: "${pageContext.request.contextPath}/getBonusTransferRate.action",
data: {
sleIds :selIds,
num: num},
success: function(data) {
var data = eval("(" + data + ")");
if(data.result < 100 && data.result >1) {
//$.messager.alert("aa", data.result);
$('#p').progressbar('setValue', data.result);
}
}
});
}

$('#p').progressbar('setValue', 100);
setTimeout(function(){
$('#progressbarDiv').css("display","none");
$('#p').progressbar('setValue', 0);
$('#progressbarDiv').window('close');
}, 1000);


<div id="progressbarDiv" class="easyui-window"
style="width: 414px; display: none;"
data-options="title:'还款进度',modal:true,collapsible:false,minimizable:false,
maximizable:false,closed:true">
请耐心等待,请勿刷新当前页面！
<div id="p" class="easyui-progressbar" style="width:400px;">
</div>

-----------------
ProgressBar 进度条

用$.fn.progressbar.defaults重写defaults。

依赖

none

用法示例

创建ProgressBar

ProgressBar能够从html标记创建或者编程创建。从标记创建更容易些，把 'easyui-progressbar' 类加入到<div/>标记。

1. <div id="p" class="easyui-progressbar" style="width:400px;"></div>

获取或者设置值

我们获取当前值并且给这个组件设置一个新值。

1. var value = $('#p').progressbar('getValue');

2. if (value < 100){

3. value += Math.floor(Math.random() * 10);

4. $('#p').progressbar('setValue', value);

5. }
特性

名称

类型

说明

默认值

width

string

设置progressbar的宽度。

auto

value

number

百分比值。

0

text

string

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

{value}%
事件

名称

参数

说明

onChange

newValue,oldValue

当值改变的时候触发。
方法

名称

参数

说明

options

none

返回options对象。

resize

width

调整组件尺寸。

getValue

none

返回当前的进度值。

setValue

value

设置一个新的进度值。