jQuery EasyUI 基礎插件– Progressbar 進度條
通過$.fn.progressbar.defaults 重寫默認的defaults。
進度條(progressbar)提供了一種顯示長時間操作進度的反饋。 進度可被更新以便讓用戶知道當前正在執行的操作。
依賴
- none
用法
創建進度條(ProgressBar)
進度條(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); }
屬性
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
width | string | 设置进度条(progressbar)的宽度。 | auto |
height | number | 组件的高度。该属性自版本 1.3.2 起可用。 | 22 |
value | number | 百分比值。 | 0 |
text | string | 显示在组件上的文本模板。 | {value}% |
事件
名称 | 参数 | 描述 |
---|---|---|
onChange | newValue,oldValue | 当值改变时触发。 代码实例: $('#p').progressbar({ onChange: function(value){ alert(value) } }); |
方法
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回选项(options)对象。 |
resize | width | 调整组件尺寸。 代码实例: $('#p').progressbar('resize'); // 调整进度条为初始宽度 $('#p').progressbar('resize', 350); // 调整进度条为一个新的宽度 |
getValue | none | 返回当前的进度值。 |
setValue | value | 设置一个新的进度值。 |
jQuery EasyUI插件