这篇文章主要为大家展示了“Jquery+Bootstrap如何自定义全屏Loading插件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JQuery+Boots
这篇文章主要为大家展示了“Jquery+Bootstrap如何自定义全屏Loading插件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JQuery+Bootstrap如何自定义全屏Loading插件”这篇文章吧。
JQuery+Bootstrap 自定义全屏Loading插件
function KZ_Loading(config) {
if (this instanceof KZ_Loading) {
const domTemplate = '<div class="modal fade kz-loading" data-kzid="@@KZ_Loadin_ID@@" backdrop="static" keyboard="false"><div ><div class="progress progress-striped active" ><div class="progress-bar" ></div></div><h6>@@KZ_Loading_Text@@</h6></div></div>';
this.config = {
content: 'loading...',
time: 0,
};
if (config != null) {
if (typeof config === 'string') {
this.config = Object.assign(this.config, {
content: config
});
} else if (typeof config === 'object') {
this.config = Object.assign(this.config, config);
}
}
this.id = new Date().getTime().toString();
this.state = 'hide';
this.show = function () {
$('.kz-loading[data-kzid=' + this.id + ']').modal({
backdrop: 'static',
keyboard: false
});
this.state = 'show';
if (this.config.time > 0) {
var that = this;
setTimeout(function () {
that.hide();
}, this.config.time);
}
};
this.hide = function (callback) {
$('.kz-loading[data-kzid=' + this.id + ']').modal('hide');
this.state = 'hide';
if (callback) {
callback();
}
};
this.destroy = function () {
var that = this;
this.hide(function () {
var node = $('.kz-loading[data-kzid=' + that.id + ']');
node.next().remove();
node.remove();
that.show = function () {
throw new Error('对象已销毁!');
};
that.hide = function () {};
that.destroy = function () {};
});
}
var domhtml = domTemplate.replace('@@KZ_Loadin_ID@@', this.id).replace('@@KZ_Loading_Text@@', this.config.content);
$('body').append(domHtml);
} else {
return new KZ_Loading(config);
}
}
基本调用:
var loading = new KZ_Loading('数据加载中。。。');
setTimeout(function () {
console.log('加载完成!');
loading.hide();
}, 1000);
自动关闭:
var loading = new KZ_Loading({
content: '数据加载中。。。',
time: 2000
});
loading.show();
销毁Loading Dom节点:
loading.destroy();
ps:下面看下基于JQUERY BOOTSTRAP 最简单的loading遮罩层
<%--loading遮罩层--%>
<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
<div >
<div class="progress progress-striped active" >
<div class="progress-bar" ></div>
</div>
<h6 id="loadText">loading...</h6>
</div>
</div>
<%--loading方法--%>
<script type="text/javascript">
var loadingTime= 5;//默认遮罩时间
showLoading = function (loadText) {
if(!loadText){
$("#loadText").html(loadText)
}
$('#loadingModal').modal({backdrop: 'static', keyboard: false});
}
hideLoading = function () {
$('#loadingModal').modal('hide');
}
</script>
以上是“JQuery+Bootstrap如何自定义全屏Loading插件”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网html频道!
--结束END--
本文标题: JQuery+Bootstrap如何自定义全屏Loading插件
本文链接: https://www.lsjlt.com/news/75510.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0