返回介绍

jQuery EasyUI 基础插件 – Progressbar 进度条

发布于 2018-05-28 02:42:26 字数 2210 浏览 1089 评论 0 收藏 0

pre { white-space: pre-wrap; } jQuery EasyUI 插件

通过 $.fn.progressbar.defaults 重写默认的 defaults。

进度条(progressbar)提供了一种显示长时间操作进度的反馈。进度可被更新以便让用户知道当前正在执行的操作。

依赖

  • none

用法

创建进度条(ProgressBar)

进度条(ProgressBar)组件可以从 html 标记创建或者编程创建。从标记创建更容易些,把 'easyui-progressbar' class 加入到 <div> 标记。

<div id="p" data-options="value:60"></div>

使用 javascript 创建进度条(ProgressBar)。

<div id="p"></div>
$('#p').progressbar({
    value: 60
});

获取或者设置值

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

var value = $('#p').progressbar('getValue');
if (value < 100){
    value += Math.floor(Math.random() * 10);
    $('#p').progressbar('setValue', value);
}

属性

名称类型描述默认值
widthstring设置进度条(progressbar)的宽度。auto
heightnumber组件的高度。该属性自版本 1.3.2 起可用。22
valuenumber百分比值。0
textstring显示在组件上的文本模板。{value}%

事件

名称参数描述
onChangenewValue,oldValue当值改变时触发。
代码实例:
$('#p').progressbar({
    onChange: function(value){
        alert(value)
    }
});

方法

名称参数描述
optionsnone返回选项(options)对象。
resizewidth调整组件尺寸。
代码实例:
$('#p').progressbar('resize');  // 调整进度条为初始宽度
$('#p').progressbar('resize', 350);  // 调整进度条为一个新的宽度
getValuenone返回当前的进度值。
setValuevalue设置一个新的进度值。
jQuery EasyUI 插件

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文