用于处理进度百分比的 jQuery 插件

版本:

浏览量:1728

最后更新：2021-09-11

应用标签：Jquery插件 git MAC 软件

推荐指数:

查看演示点击下载

详细信息

Progress LGH 是一个轻量级的、与框架无关的 jQuery 进度插件，它可以更轻松地设置、获取和更新进度条组件中的百分比值。

与流行的框架一起使用，如Bootstrap的进度条组件，并支持基于 API 响应的实时百分比计算。

也可以看看：

10 个最佳进度条（线性）组件

如何使用它：

1.在jQuery库之后加载Progress LGH插件的脚本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery-progress-lgh.js"></script>

2. 在您的网页中添加一个进度条组件（如 Bootstrap 进度条）。

<div class="progress-bar" role="progressbar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="demo"></div>

3. 使用以下回调函数设置和获取百分比值。

const progress = new Progress({
      get: function () {
        percentage = percentage + Math.random()*10|0;
        if(percentage>100){
            percentage = 100;
        }
        progress.update(percentage);
      },
      set: function (percentage) {
        switch(type) {
          case 'bootstrap':
            filter.css('width', percentage+'%').text(percentage+'%');
            break;
          case 'layui':
            element.progress(filter, percentage + '%');
            if (index && percentage === 100) {
              layer.close(index);
            }
            break;
          default:
        }
      }
});

4. 或者根据来自 API (JSON) 的响应获取百分比值。

const progress = new Progress({
      url: '/path/to/API',
      data: {
        // parameters here
      },
      set: function (percentage) {
        // update the progress bar
      }
});

5. 需要时启动进度条。

progress.start();

6. 更多插件配置。

const progress = new Progress({
 
      // current percentage
      percentage: 0,
 
      // debounce options
      debounce: true,
      debouncePercentage: 0,
       
      // progress timer
      pf0: null,
 
      // debounce timer
      pf1: null,
 
      // progress delay
      pf0Delay: 1000,
 
      // debounce delay
      pf1Delay: 50
       
});

7、更多的API方法。

// update the progress bar with or without debounce
progress.update(percentage, jump);
 
// update the progress bar to 100%
progress.finish();
 
// reset the progress bar
progress.reset();

联系我们

免费复制

微信扫码关注领取验证码

注:需在公众号回复"验证码