JQuery+Bootstrap⾃定义全屏Loading插件的⽰例demo
JQuery+Bootstrap ⾃定义全屏Loading插件
/**
* ⾃定义Loading插件
* @param {Object} config
* {
* content[加载显⽰⽂本],
* time[⾃动关闭等待时间(ms)]
* }
* @param {String} config
* 加载显⽰⽂本
汽车光线传感器* @refer 依赖 JQuery-1.9.1及以上、Bootstrap-3.3.7及以上
* @return {KZ_Loading} 对象实例jquery下载文件插件
*/
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 style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-1    fig = {
content: '',
time: 0,
};
if (config != null) {
if (typeof config === 'string') {
content: config
});
} else if (typeof config === 'object') {
}
}
this.id = new Date().getTime().toString();
this.state = 'hide';
/*显⽰ */
this.show = function () {
$('.kz-loading[data-kzid=' + this.id + ']').modal({
backdrop: 'static',
integrity例句
keyboard: false
});
this.state = 'show';
createtempfile linux目录if (fig.time > 0) {
var that = this;
setTimeout(function () {
that.hide();
}, fig.time);
}
};
/*隐藏 */
this.hide = function (callback) {
$('.kz-loading[data-kzid=' + this.id + ']').modal('hide');
this.state = 'hide';
if (callback) {
callback();
}
};
/*销毁dom */
this.destroy = function () {
var that = this;
this.hide(function () {
var node = $('.kz-loading[data-kzid=' + that.id + ']');
<().remove();
that.show = function () {
throw new Error('对象已销毁！');
};
that.hide = function () {};
that.destroy = function () {};
});
}
var domHtml = place('@@KZ_Loadin_ID@@', this.id).replace('@@KZ_Loading_Text@@', t);
$('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>
学而思编程游戏    <h5 id="loadText"&</h5>
  </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插件的⽰例demo，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。