利用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中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
黑夜路人出的几道php笔试题
2009/08/04 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
Pytorch to(device)用法
2020/01/08 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
十八大闭幕感言
2014/01/22 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
买房协议书范本
2014/10/23 职场文书
2014年林业工作总结
2014/12/05 职场文书
通知范文怎么写
2015/04/16 职场文书
Python实现自动玩连连看的脚本分享
2022/04/04 Python