等待控件在网上搜有好多种，但是都很复杂，不一定用的顺手，再说我的项目是bootstrap的原因，又不敢轻易使用第三方控件，怕不兼容，于是自己动手写了个等待控件，其技术点包括动态加载css，javascript的命名空间，所以记录一下。
这个等待控件主要是：进行某个操作前，显示一个信息提示：“数据加载中，请稍候。。。”,操作成功后，在回调函数中将提示消失，原理是这个等待控件完全由js动态加进去，包括css，页面中并无预先设定。
那么这个css怎么动态加载呢？等待控件中，样式使用了class，如果我们将这些class预先写在样式文件中，那么调用页面除了要引用相关js文件，还要引用css文件；就算在js文件中动态加载此css文件，但想想看，一个如此简单的控件就包含了2个文件，小题大做了点。
我是在js中动态拼凑、加载css。
代码如下：
var ftabpages = function () { var tabkeeper = null; // e.g. // tabkeeper = { // container: // , iserase: true // , url: // , params: {} // , callback: null // }; var wrap = $(document.body); function inittab(tabjson) { tabkeeper = tabjson; } function ontab(tabjson) {//切换页签 if (tabkeeper != null) { var divprev = $(tabkeeper.container); if (tabkeeper.iserase) { divprev.empty(); } divprev.css(display, none); } tabkeeper = tabjson; var div = $(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); } } function getviewrequest(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); } } }); } function docallback(callback) { if (typeof callback != 'undefined' && callback instanceof function) { callback(); } } function resettab() {//刷新当前页签 loadwaiting(); var div = $(tabkeeper.container); getviewrequest(tabkeeper.url, tabkeeper.params, function (data) { div.empty().html(data); div.css(display, ); docallback(tabkeeper.callback); removeloading(); }); } function loadwaiting() {//显示等待信息 $(
).css({ display: block, width: wrap.width(), height: wrap.height() }).appendto(wrap); $(
).html(数据加载中，请稍候...).appendto(wrap).css({ display: block, left: (wrap.width() - $(div.datagrid-mask-msg, wrap).outerwidth()) / , top: ($(window).height() - $(div.datagrid-mask-msg, wrap).outerheight()) / }); } function removeloading() {//隐藏等待信息 wrap.find(div.datagrid-mask-msg).remove(); wrap.find(div.datagrid-mask).remove(); } function initloading() {//设置等待控件样式 var css = .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: px px px px;; 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 { var style = 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(hello world!); } });
以上所述就是关于javascript前端等待控件的实现过程，希望本文所述对大家有所帮助。