微客导航 » 文章资讯 » JQuery+Bootstrap 自定义全屏Loading插件的示例demo

JQuery+Bootstrap 自定义全屏Loading插件的示例demo

2023-08-20 14:41:05 302

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}对象实例
*/
functionKZ_Loading(config){
if(thisinstanceofKZ_Loading){
constdomTemplate='

@@KZ_Loading_Text@@

'; this.config={ content:'loading...', time:0, }; if(config!=null){ if(typeofconfig==='string'){ this.config=Object.assign(this.config,{ content:config }); }elseif(typeofconfig==='object'){ this.config=Object.assign(this.config,config); } } this.id=newDate().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){ varthat=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(); } }; /*销毁dom*/ this.destroy=function(){ varthat=this; this.hide(function(){ varnode=$('.kz-loading[data-kzid='+that.id+']'); node.next().remove(); node.remove(); that.show=function(){ thrownewError('对象已销毁！'); }; that.hide=function(){}; that.destroy=function(){}; }); } vardomHtml=domTemplate.replace('@@KZ_Loadin_ID@@',this.id).replace('@@KZ_Loading_Text@@',this.config.content); $('body').append(domHtml); }else{ returnnewKZ_Loading(config); } }

基本调用：

varloading=newKZ_Loading('数据加载中。。。');
setTimeout(function(){
console.log('加载完成!');
loading.hide();
},1000);

自动关闭：

varloading=newKZ_Loading({
content:'数据加载中。。。',
time:2000
});
loading.show();

销毁LoadingDom节点：

loading.destroy();

ps：下面看下基于JQUERYBOOTSTRAP最简单的loading遮罩层

<%--loading遮罩层--%>

loading... <%--loading方法--%> varloadingTime=5;//默认遮罩时间 showLoading=function(loadText){ if(!loadText){ $("#loadText").html(loadText) } $('#loadingModal').modal({backdrop:'static',keyboard:false}); } hideLoading=function(){ $('#loadingModal').modal('hide'); }

总结

以上所述是小编给大家介绍的JQuery+Bootstrap自定义全屏Loading插件的示例demo,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

返回顶部
3162201930
czq8825@qq.com

JQuery+Bootstrap 自定义全屏Loading插件的示例demo

@@KZ_Loading_Text@@

热门推荐

随机推荐