博客

EasyUI jQuery progressbar widget

  • Post category:jquery

下面是针对EasyUI jQuery progressbar widget的完整攻略：

1. 简介

EasyUI jQuery progressbar widget是一个用于显示进度条的jQuery插件，可以用于展示业务逻辑处理、文件上传、数据加载等过程的进度，支持动态刷新进度条、显示进度百分比等功能，使用简单，操作方便。

2. 安装

可以通过以下两种方式安装EasyUI jQuery progressbar widget：

  1. 使用CDN，引入EasyUI和jQuery文件：
<!-- 引入jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入EasyUI文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easyui/1.9.4/themes/default/easyui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easyui/1.9.4/themes/icon.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/easyui/1.9.4/jquery.easyui.min.js"></script>
<!-- 引入EasyUI jQuery progressbar widget文件 -->
<script src="https://cdn.jsdelivr.net/npm/jquery-easyui-progressbar/jquery.easyui.progressbar.min.js"></script>
  1. 下载EasyUI jQuery progressbar widget压缩包，解压后将其中的js和css文件复制到项目中。

3. 使用

3.1 基本使用

在html中添加一个div元素，设置id为“pb”，在js文件中添加以下代码即可：

$('#pb').progressbar({
    value: 50    // 初始值为50
});

3.2 动态更新进度条

通过修改value属性可以动态更新进度条，可以配合setTimeout和setInterval等函数实现自动更新进度条。

var val = 0;
var pb = $('#pb');
var timer = setInterval(function(){
    val += 10;
    if(val > 100){
        clearInterval(timer);
        pb.progressbar('setValue', 0);    // 回到起点
    }else{
        pb.progressbar('setValue', val);
    }
}, 500);

3.3 自定义样式

可以通过在progressbar标签中添加class属性和设置样式来自定义进度条的外观。

<div id="pb" class="my-progressbar"></div>

.my-progressbar .progressbar-value{
    background-color: #ffa500;
}

4. 示例

下面是针对EasyUI jQuery progressbar widget的两个示例：

示例1

自动更新进度条，并在进度条结束时自动跳转至另一个页面。

var val = 0;
var pb = $('#pb');
var timer = setInterval(function(){
    val += 10;
    if(val > 100){
        clearInterval(timer);
        window.location.href = 'http://www.example.com';    // 跳转至另一个页面
    }else{
        pb.progressbar('setValue', val);
    }
}, 500);

示例2

显示数据加载进度条，从服务器获取数据并在加载完毕后关闭进度条。

var pb = $('#pb');
pb.progressbar({
    value: false,    // 不显示初始值
    text: '加载中...',    // 显示加载文字
    onChange: function(newValue, oldValue){
        if(newValue == 100){
            pb.progressbar('close');    // 加载完毕后关闭进度条
        }
    }
});
$.ajax({
    url: 'http://www.example.com/data',
    success: function(data){
        // 处理数据
    }
});
Tags: