EasyUI中进度条的简单使用

最新推荐文章于 2024-06-28 11:09:57 发布

霸道流氓气质

最新推荐文章于 2024-06-28 11:09:57 发布

阅读量1k

点赞数

分类专栏： EasyUI EasyUI入门学习教程文章标签：进度条

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92709646

版权

EasyUI 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

EasyUI入门学习教程

24 篇文章 3 订阅

订阅专栏

场景

效果

属性

名称	类型	描述	默认值
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) } });

名称

参数

描述

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	设置一个新的进度值。

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
<input type="button" value="开始" onclick="start()">
<script type="text/javascript">
    function  start() {
        var value=$("#p").progressbar("getValue");
        $("#p").progressbar("setValue",value+10);
    }
</script>
</body>
</html>

霸道流氓气质

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
EasyUI中进度条的简单使用

场景效果属性名称类型描述默认值 width string 设置进度条（progressbar）的宽度。 auto height number 组件的高度。该属性自版本 1.3.2 起可用。 22 value number 百分比值。 0 text string 显示在组件上的文...
复制链接

扫一扫