欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » JQuery EasyUI 1.3.6官方API文档中文版 » 正文

ProgressBar(进度条)

创建时间:2014年08月27日 09:26  阅读次数:(4232)
分享到:

ProgressBar(进度条)

使用$.fn.progressbar.defaults重写默认值对象。

进度条提供了一个反馈显示一个长时间运行的操作进展。可以更新的进展条,让用户知道当前正在执行操作。

 

使用案例

创建进度条

使用HTML标签或程序创建进度条组件。从标签创建更加简单,添加'easyui-progressbar'类ID到<div/>标签。

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

使用Javascript创建进度条。

  1. <div id="p" style="width:400px;"></div>
  1. $('#p').progressbar({
  2. value: 60
  3. });
获取值和设置值

获取当前值和设置一个新的值到进度条控件。

  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 设置进度条宽度。 auto
height number 设置进度条高度。(该属性自1.3.2版开始可用) 22
value number The percentage value. 0
text string The text template to be displayed on component. {value}%

 

事件

事件名 事件参数 描述
onChange newValue,oldValue 在值更改的时候触发。

代码示例:

$('#p').progressbar({
	onChange: function(value){
		alert(value)
	}
});

 

方法

方法名 方法参数 描述
options none 返回属性对象。
resize width 组件大小。 

代码示例:

$('#p').progressbar('resize');           // 更改进度条到原始宽度
$('#p').progressbar('resize', 350);   // 更改进度条到新的宽度
getValue none 返回当前进度值。
setValue value 设置一个新的进度值。

(该方法自1.3版开始可用)
来源:
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf】

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论1条
  • #1楼  评论人:匿名  评论时间:2016-11-18 11:02:24
  • 加个示例演示模块就好了。。。。。。
发表评论:
留言人:
内  容:
请输入问题 46+80=? 的结果(结果是:126)
结  果: