利用jquery和BootStrap实现动态滚动条效果


Posted in jQuery onDecember 03, 2018

在某项目中遇到excel导入时客户要求显示滚动条效果,在此基础上使用js为其封装了个进度条类,只需要简单为其创建个div容器就可轻松实现效果,类具体如下:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Bootstrap 101 Template</title>
    
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  
  </head>
  <body>
    <!-- 进度条示例 -->
    <!-- <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="0" 
      aria-valuemin="0" aria-valuemax="100">
        <span class="proText"></span>
      </div>
    </div> -->
    
    <div id="contain"></div>
    
    <button onclick="refreshPro()">refresh</button>
    <button onclick="finish()">finish</button>
    <button onclick="remove()">remove</button>
    
    <script>
      
      var progressBar = null;
      
      function refreshPro() {
        var con = $("#contain");
        progressBar = new ProgressBar();
        progressBar.setContainer(con);
        progressBar.showProcessBar();
      }
      
      function finish() {
        progressBar.finishProcessBar();
      }
      
      function remove() {
        progressBar.destroyProcessBar();
      }
     
    //如果在规定时间内都没有完成进度条,则停留在90%地方,一旦完成立刻到100%
    //写在ajax请求执行开始处进行创建,执行完成后执行完成进度条进度为100%
    //定义进度条类
    //提供构建/展示/销毁等工作
    //container为要包含进入条展示容器
      function ProgressBar($container) {
        
        var self = this;
        
        var container;
        
        if($container != null) {
          container = $container;
        }
        
        var interval; //创建的周期函数对象
        var _id = "progress_bar" + new Date().getTime(); //progressBar随机id编号
        
        self.setContainer = function(_container) {
          container = _container;
        }
        
        //为当前容器加入progress
        self.createProgressBar = function() {
          container.append('<div class="progress" id="'+ _id +'"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"><span class="proText"></span></div></div>');
        }
        
        self.beginProcessBar = function() {
          var i = 0;
          interval = setInterval(function() {
            i += 10;
            if(i <= 90) {
              $("#" + _id + " .progress-bar").css({"width":i + "%"});
              $("#" + _id + " .proText").text(i + '%');
            }
          }, 1000);
        }
        
        self.showProcessBar = function() {
          self.createProgressBar();
          self.beginProcessBar();
        }
        
        self.finishProcessBar = function() {
          if(interval != null) {
            $("#" + _id + " .progress-bar").css({"width": "100%"});
            $("#" + _id + " .proText").text('100%');
            clearInterval(interval);
          }  
        }
        
        self.destroyProcessBar = function() {
          $("#" + _id).remove();
        }
        
        return self;
      }
      
    </script>
  </body>
</html>

总结

以上所述是小编给大家介绍的利用jquery和BootStrap实现动态滚动条效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
基于jquery实现二级联动效果
Mar 30 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 #jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 #jQuery
jQuery实现网页拼图游戏
Apr 22 #jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 #jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 #jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 #jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 #jQuery
You might like
php5新改动之短标记启用方法
2008/09/11 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
超级强大的表单验证
2006/06/26 Javascript
jquery简单体验
2007/01/10 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
WebPack基础知识详解
2017/01/16 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
微信小程序实现留言功能
2018/10/31 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
numpy库reshape用法详解
2020/04/19 Python
python归并排序算法过程实例讲解
2020/11/04 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
篮球赛口号
2014/06/18 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
2015年招聘工作总结
2014/12/12 职场文书
小学科学教学计划
2015/01/21 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
Redis三种集群模式详解
2021/10/05 Redis
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
基于Python实现将列表数据生成折线图
2022/03/23 Python
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js