easyUI基础-progressbar进度条

最新推荐文章于 2025-04-18 11:18:33 发布

小太阳哇

最新推荐文章于 2025-04-18 11:18:33 发布

阅读量984

点赞数 1

分类专栏： easyUI学习

本文链接：https://blog.youkuaiyun.com/qq_39492374/article/details/86519045

版权

easyUI学习专栏收录该内容

17 篇文章

订阅专栏

本文介绍了easyUI中的progressbar组件，用于显示长时间运行操作的进度，提升用户体验。内容包括组件的属性、事件和方法，如onChange事件、resize方法等，并提供了设置默认值及动态进度条的DEMO。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

进度条可以提供反馈一个长时间运行的操作的显示进展。这个进程可以更新,能够让用户知道当前操作执行的进度,提高用户体验。

使用$.fn.progressbar.defaults重载默认值。

属性

名称	类型	描述	默认值
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	设置一个新的进度值。

一、创建组件

1.class加载

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

2.js加载

    <div id="p" style="width:400px;"></div>

   

    <script>

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

    </script>

二、属性

<div id="pb"></div>
<script>
    $(function () {
        $("#pb").progressbar({
            //进度条宽度，默认auto
            width: 400,
            //进度条高度，默认为22
            height: 30,
            //进度条值，默认为0
            value: 60,
            //设置进度条百分比模板
            text: "{value}%"
        });
    })
</script>

生成的html

<div id="pb" class="progressbar" style="width: 398px; height: 28px;">
    <div class="progressbar-text" style="width: 398px; height: 28px; line-height: 28px;">60%</div>
    <div class="progressbar-value" style="width: 60%; height: 28px; line-height: 28px;">
        <div class="progressbar-text" style="width: 398px; height: 28px; line-height: 28px;">60%</div>
    </div>
</div>

三、事件

onChange：在值更改的时候触发

<div id="pb"></div>
<script>
    $(function () {
        $("#pb").progressbar({
            value: 60,
            onChange: function (newValue, oldValue) {
                console.log("新：" + newValue + "，旧：" + oldValue);
            }
        });
        setTimeout(function () {
            $("#pb").progressbar("setValue", 70);
        }, 1000);
        setInterval(function () {
            $("#pb").progressbar("setValue", $("#pb").progressbar("getValue") + 5);
        }, 1000);
    })
</script>

四、方法

1.options

<div id="pb"></div>
<script>
    $(function () {
        $("#pb").progressbar({

        });
        console.log($("#pb").progressbar("options"));
    })
</script>

输出的结果

2.resize

<div id="pb"></div>
<script>
    $(function () {
        $("#pb").progressbar({
            value: 60
        });
        //设置组件长度
        $("#pb").progressbar("resize", "500");
    })
</script>

3.getValue，setValue

五、设置默认值

$.fn.progressbar.defaults.value = 60;

DEMO

动态进度条

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>进度条演示</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
    <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head>
 
<body>
    <script type="text/javascript">
        function start() {
            var value = $('#p').progressbar('getValue');
            if (value < 100) {
                value += Math.floor(Math.random() * 10);
                $('#p').progressbar('setValue', value);
                setTimeout(arguments.callee, 200);
                if (value >= 100) {
                    $('#button').linkbutton('disable');//文件上传成功之后禁用按钮
                    $('#p').progressbar('disable');//文件上传成功之后禁用进度条
                }
            }
        }
    </script>
    <div id="p" class="easyui-progressbar" data-options="value:0" style="width:400px;"></div>
    </br>
    <a onclick="start()" id="button" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-mini-refresh'">文件上传</a>
    <script>
        $('#p').progressbar({
            text: '文件上传{value}%',
        });
    </script>
</body>
 
</html>