在某项目中遇到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/K68vbdEjh5u" 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实现动态滚动条效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。