自己動手寫的javascript前端等待控制項，javascript前端

自己動手寫的javascript前端等待控制項，javascript前端

等待控制項在網上搜有好多種，但是都很複雜，不一定用的順手，再說我的項目是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前端等待控制項的實現過程，希望本文所述對大家有所協助。