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

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

版本:

浏览量:1220

最后更新:2021-09-11

应用标签:MAC 软件gitJquery插件

推荐指数:

详细信息

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();
联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。