easyUI ProgressBar

来源:互联网 发布:南京网络教育 编辑:程序博客网 时间:2024/06/05 08:16

@author YHC

覆盖默认值$.fn.progressbar.defaults.

progressbar 提供一个反馈显示一个长时间执行的进度条,progress 可以更新来让用户知道当前执行的一些操作.


相关依赖

  • none

使用示例

创建ProgressBar
ProgressBar 组件可以从html标记和编程的方式创建.从标记创建非常简单.添加'easyui-progressbar'样式到<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);  }  

属性

NameTypeDescriptionDefaultwidthstring设置 progressbar 宽度.autovaluenumber设置百分比值.0textstring显示到组件上的文本模版.{value}%

事件

NameParametersDescriptiononChangenewValue,oldValue当值改变的时候触发.

示例代码:

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

方法

NameParameterDescriptionoptionsnone返回options 对象.resizewidth重置组件大小.

示例代码:

$('#p').progressbar('resize');  // 在原来的宽度重置bar的大小$('#p').progressbar('resize', 350);  // 重置bar的大小使用新的宽度
getValuenone返回当前的进度值.setValuevalue设置新的进度值.

  以上如有错误信息,请指出,thanks!



原创粉丝点击