自己动手写的javascript前端等待控件
等待控件在网上搜有好多种,但是都很复杂,不一定用的顺手,再说我的项目是bootstrap的原因,又不敢轻易使用第三方控件,怕不兼容,于是自己动手写了个等待控件,其技术点包括动态加载CSS,javascript的命名空间,所以记录一下。
这个等待控件主要是:进行某个操作前,显示一个信息提示:“数据加载中,请稍候。。。”,操作成功后,在回调函数中将提示消失,原理是这个等待控件完全由JS动态加进去,包括CSS,页面中并无预先设定。
那么这个CSS怎么动态加载呢?等待控件中,样式使用了class,如果我们将这些class预先写在样式文件中,那么调用页面除了要引用相关JS文件,还要引用CSS文件;就算在js文件中动态加载此css文件,但想想看,一个如此简单的控件就包含了2个文件,小题大做了点。
我是在JS中动态拼凑、加载CSS。
代码如下:
varFTabPages=function(){ vartabKeeper=null; //e.g. //tabKeeper={ //container:"" //,isErase:true //,url:"" //,params:{} //,callback:null //}; varwrap=$(document.body); functioninitTab(tabJson){ tabKeeper=tabJson; } functiononTab(tabJson){//切换页签 if(tabKeeper!=null){ vardivPrev=$(tabKeeper.container); if(tabKeeper.isErase){ divPrev.empty(); } divPrev.css("display","none"); } tabKeeper=tabJson; vardiv=$(tabJson.container); div.css("display",""); if($.trim(div.html()).length==){//首次加载或已清空 loadwaiting(); getViewRequest(tabJson.url,tabJson.params,function(data){ div.empty().html(data); docallback(tabJson.callback); removeloading(); },function(data){ alert("数据获取超时或失败!"); removeloading(); }); }else{//非首次加载,隐藏但不清空 docallback(tabJson.callback); } } functiongetViewRequest(url,params,onsuccess,onerror){ $.ajax({ type:'get', url:url, data:params, contentType:"text/html;charset=utf-", timeout:, success:function(data){ if(onsuccess!=undefined&&onsuccess!=null){ onsuccess(data); } }, error:function(data){ if(onerror!=undefined&&onerror!=null){ onerror(data); } } }); } functiondocallback(callback){ if(typeofcallback!='undefined'&&callbackinstanceofFunction){ callback(); } } functionresetTab(){//刷新当前页签 loadwaiting(); vardiv=$(tabKeeper.container); getViewRequest(tabKeeper.url,tabKeeper.params,function(data){ div.empty().html(data); div.css("display",""); docallback(tabKeeper.callback); removeloading(); }); } functionloadwaiting(){//显示等待信息 $("<divclass=\"datagrid-mask\"></div>").css({display:"block",width:wrap.width(),height:wrap.height()}).appendTo(wrap); $("<divclass=\"datagrid-mask-msg\"></div>").html("数据加载中,请稍候...").appendTo(wrap).css({display:"block",left:(wrap.width()-$("div.datagrid-mask-msg",wrap).outerWidth())/,top:($(window).height()-$("div.datagrid-mask-msg",wrap).outerHeight())/}); } functionremoveloading(){//隐藏等待信息 wrap.find("div.datagrid-mask-msg").remove(); wrap.find("div.datagrid-mask").remove(); } functioninitloading(){//设置等待控件样式 varcss=".datagrid-mask{"; css+="position:absolute;"; css+="left:;"; css+="top:;"; css+="width:%;"; css+="height:%;"; css+="opacity:.;"; css+="filter:alpha(opacity=);"; css+="display:none;"; css+="}"; css+=".datagrid-mask-msg{"; css+="position:absolute;"; css+="top:%;"; css+="margin-top:-px;"; css+="padding:pxpxpxpx;"; css+="width:auto;"; css+="height:px;"; css+="border-width:px;"; css+="border-style:solid;"; css+="display:none;"; css+="}"; //动态加载CSS if(document.all){ window.style=css; document.createStyleSheet("javascript:style"); }else{ varstyle=document.createElement('style'); style.type='text/css'; style.innerHTML=css; document.getElementsByTagName('HEAD').item().appendChild(style); } } initloading(); return{//这里是供外部调用的方法 onTab:function(tabJson){ onTab(tabJson); } ,resetTab:function(){ resetTab(); } ,init:function(tabJson){ initTab(tabJson); } }; }();
外部如何调用呢?就这样:
FTabPages.init({ container:"#div_BasicInfo" ,isErase:true ,url:"http://blog.csdn.net/leftfist" ,params:{} ,callback:function(){ alert("HelloWorld!"); } });
以上所述就是关于javascript前端等待控件的实现过程,希望本文所述对大家有所帮助。