等待控件在網上搜有好多種，但是都很復雜，不一定用的順手，再說我的項目是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() {//顯示等待信息 $("<div class=/"datagrid-mask/"></div>").css({ display: "block", width: wrap.width(), height: wrap.height() }).appendTo(wrap); $("<div class=/"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()) / }); } 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前端等待控件的實現過程，希望本文所述對大家有所幫助。
新聞熱點
疑難解答
