easyui进度条

发布于：2025-04-20 ⋅ 阅读:(15) ⋅ 点赞:(0)

简单打开和关闭

// 展示进度条
$.messager.progress({
                title: '请稍候',
                msg: '系统处理中...',
                text: '0%'
            });
   //关闭进度条         
 $.messager.progress('close');

easyui 普通提示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI Loading示例</title>
    <!-- 引入EasyUI核心样式和jQuery -->
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <button onclick="startLoading()">开始加载</button>
    <button onclick="closeLoading()">关闭加载</button>

    <script>
        let loading;

        function startLoading() {
            // 显示加载提示
            loading = $.messager.progress({
                title: '请稍候',
                msg: '系统处理中...',
                text: '0%'
            });

            // 模拟进度更新
            let value = 0;
            const interval = setInterval(() => {
                value += 10;
                if(value > 100) {
                    clearInterval(interval);
                    $.messager.progress('close');
                    $.messager.alert('完成', '操作已成功完成');
                }
                // 更新进度条
                loading.progressbar('setValue', value);
                // 更新文本显示
                loading.progressbar('setText', value + '%');
            }, 500);
        }

        function closeLoading() {
            if(loading) {
                $.messager.progress('close');
            }
        }
    </script>
</body>
</html>

文件上传进度

<script>
function advancedLoading() {
    // 显示带自定义样式的加载提示
    const loading = $.messager.progress({
        title: '文件上传',
        msg: '正在上传大文件...',
        text: '初始化...',
        width: 300,
        height: 100,
        modal: true // 显示模态遮罩层
    });

    // 模拟分步骤加载
    const steps = ['准备文件', '计算哈希', '分片上传', '合并文件', '完成'];
    let stepIndex = 0;

    const interval = setInterval(() => {
        stepIndex++;
        if(stepIndex >= steps.length) {
            clearInterval(interval);
            loading.progressbar('setValue', 100);
            loading.progressbar('setText', '100%');
            setTimeout(() => {
                $.messager.progress('close');
                $.messager.show({
                    title: '成功',
                    msg: '文件上传完成！'
                });
            }, 500);
            return;
        }

        // 更新进度和文本
        const progress = Math.round((stepIndex / steps.length) * 100);
        loading.progressbar('setValue', progress);
        loading.progressbar('setText', `${steps[stepIndex]} (${progress}%)`);
    }, 1000);
}
</script>

<button onclick="advancedLoading()">高级加载示例</button>

主要参数

const loading = $.messager.progress({
    title: '标题',     // 标题文本
    msg: '消息内容',   // 提示消息
    text: '初始文本',  // 进度条上的文本
    width: 300,       // 宽度
    height: 100,      // 高度
    modal: true       // 是否显示模态遮罩层
});

获取进度条和设置进度条

const progressBar = loading.progressbar('bar');
// 之后可以通过progressBar调用progressbar的方法
progressBar.progressbar('setValue', 50);

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布