利用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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jQuery实现视频展示效果
May 30 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
jquery操作select option 的代码小结
2011/06/21 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
Python中的TCP socket写法示例
2018/05/11 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
python的等深分箱实例
2019/11/22 Python
Python3实现飞机大战游戏
2020/04/24 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
护理自荐信
2013/10/22 职场文书
大学新生入学教育方案
2014/05/16 职场文书
党建工作整改措施
2014/10/28 职场文书
单位介绍信格式
2015/01/31 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
环境卫生标语
2015/08/03 职场文书
致运动员的广播稿
2015/08/19 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
在js中修改html body的样式
2021/11/11 Javascript
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技