自己动手写的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前端等待控件的实现过程，希望本文所述对大家有所帮助。