您的位置：首页 > Web前端 > BootStrap

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

2019-05-27 18:02 2181 查看

在某项目中遇到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实现动态滚动条效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航