Do-it-Yourself JavaScript front-end wait control _javascript tips

Wait for the control in the online search there are many kinds of, but are very complex, not necessarily use, and then my project is bootstrap reason, and dare not easily use a Third-party control, afraid of incompatible, so I wrote a waiting control, its technical points include dynamic loading Css,javascript namespace, So write it down.

This wait control is mainly: Before doing an operation, display an informational prompt: "In data loading, please wait ... ", after successful operation, in the callback function will be prompted to disappear, the principle is this wait control completely by JS Dynamic add in, including CSS, the page is not pre-set."

So how does this CSS dynamically load? Wait in the control, the style uses class, if we write these classes in a style file, then the calling page will refer to the CSS file in addition to the relevant JS file, even if the CSS file is dynamically loaded in the JS file, but think of it as a simple control that contains 2 files, It's a bit of a fuss.

I am in JS dynamic patchwork, loading CSS.

The code is as follows:

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) {//Toggle page Check 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 = =) {//First loaded or emptied loadwaiting ();
        Getviewrequest (Tabjson.url, Tabjson.params, function (data) {Div.empty (). HTML (data);
        DoCallback (Tabjson.callback);
      Removeloading (); The function (data) {alert ("Fetch timeout or failure!")
        ");
      Removeloading ();
    });
    else {//not first loaded, hidden but not emptied 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 ();
    The function Resettab () {//Refreshes the current page sign 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 () {//Display wait Information $ ("<div class=\ datagrid-mask\" &GT;&LT;/DIV&Gt; ").
    CSS ({display: "Block", Width:wrap.width (), Height:wrap.height ()}). Appendto (wrap); $ ("<div class=\" datagrid-mask-msg\ "></div>"). HTML (Please wait while in data Loading ...). Appendto (Wrap). CSS ({display: " Block ', Left: (Wrap.width ()-$ ("div.datagrid-mask-msg", wrap). Outerwidth ())/, Top: ($ (window). Height ()-$ ("Div.datagr
  Id-mask-msg ", wrap). Outerheight ())/});
    function removeloading () {//Hide wait Information wrap.find ("Div.datagrid-mask-msg"). Remove ();
  Wrap.find ("Div.datagrid-mask"). Remove ();
    function initloading () {//Set wait control style 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;";        CSS + + "Width:auto;"
    ";        CSS + + "HEIGHT:PX;"
    ";     CSS + + "BORDER-WIDTH:PX;"
    ";    CSS + + "border-style:solid;"
    ";       CSS + + "display:none;"
    ";
    CSS + = "}";
      Dynamically load 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 {//Here is a method for external invocation ontab:function (Tabjson) {ontab (Tabjson);
    }, Resettab:function () {resettab ();
    }, Init:function (Tabjson) {initTab (Tabjson);
}
  }; }();

How does the external call? That's it:

Ftabpages.init ({
  container: "#div_BasicInfo"
  , iserase:true
  , url: "Http://blog.csdn.net/leftfist"
  , params: {}
  , callback:function () {
     alert ("Hello world!");
  }  
);

The above mentioned is about the JavaScript front-end waiting for the implementation of the control process, I hope this article is helpful to everyone.