Write a front-end wait control in JavaScript

What's new with front-end wait controls? What jquery, third-party controls, a lot more, and so on.

Because the project uses the bootstrap reason, does not want to use the third party easily, is afraid is incompatible. Write one yourself.

Technical points include dynamically loading Css,javascript namespaces, so record them.

The wait control is primarily: Before an action is performed, a message is displayed: "Please wait while the data is loaded ... ", after the operation succeeds, the prompt disappears in the callback function.

The principle is that the wait control is completely added by the JS dynamic, including CSS, the page is not pre-set.

So how does this CSS dynamically load? Wait for the control, the style uses class, if we write these classes in the style file, the call page in addition to reference the relevant JS file, but also to reference the CSS file, even if the JS file dynamically loaded this CSS file, but think of it, a simple control contains 2 of files, A little fuss.

I was in JS in the dynamic patchwork, loading CSS.

The code is as follows:

varFtabpages = function () {    varTabkeeper =NULL;//e.g.    //Tabkeeper = {    //Container: ""    //, Iserase:true    //, URL: ""    //, params: {}    //, Callback:null    // };    varWrap = $ (document.body); function initTab(Tabjson) {Tabkeeper = Tabjson; } function ontab(Tabjson) {//Toggle tab        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 = =0) {//First load or emptiedLoadwaiting (); Getviewrequest (Tabjson.url, Tabjson.params, function (data) {Div.empty (). HTML (data);                DoCallback (Tabjson.callback);            Removeloading (); }, function (data) {Alert"Data acquisition timed out or failed!" ");            Removeloading ();        }); }Else{//non-first load, hidden but not emptiedDoCallback (Tabjson.callback); }    } function getviewrequest(URL, params, onsuccess, onerror) {$.ajax ({type:' Get ', Url:url, Data:params, ContentType:"text/html; Charset=utf-8 ", timeout:30000, Success: function (data) {                if(Onsuccess! =undefined&& onsuccess! =NULL) {onsuccess (data); }}, Error: function (data) {                if(OnError! =undefined&& onerror! =NULL) {onerror (data);    }            }        }); } function docallback(callback) {        if(typeofCallback! =' undefined '&& Callbackinstanceof Function) {callback (); }    } function resettab() {//Refresh current tabLoadwaiting ();vardiv = $ (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\ "></div> "). CSS ({display:"Block", Width:wrap.width (), Height:wrap.height ()}). AppendTo (wrap); $("<div class=\" datagrid-mask-msg\ "></div> "). HTML ("Please wait while the data is loaded ..."). AppendTo (Wrap). CSS ({display:"Block", Left: (Wrap.width ()-$ ("Div.datagrid-mask-msg", wrap). Outerwidth ())/2, Top: ($ (window). Height ()-$ ("Div.datagrid-mask-msg", wrap). Outerheight ())/2}); } function removeloading() {//Hide Wait informationWrap.find ("Div.datagrid-mask-msg"). Remove (); Wrap.find ("Div.datagrid-mask"). Remove (); } function initloading() {//Set wait control style        varCSS =". Datagrid-mask {"; CSS + ="Position:absolute; "; CSS + ="left:0; "; CSS + ="top:0; "; CSS + ="width:100%; "; CSS + ="height:100%; "; CSS + ="opacity:0.3; "; CSS + ="Filter:alpha (opacity=30); "; CSS + ="Display:none; "; CSS + ="} "; CSS + =". datagrid-mask-msg {"; CSS + ="Position:absolute; "; CSS + ="top:50%; "; CSS + ="Margin-top: -20px; "; CSS + ="padding:10px 5px 10px 10px;"; CSS + ="Width:auto; "; CSS + ="HEIGHT:16PX; "; CSS + ="BORDER-WIDTH:2PX; "; CSS + ="BORDER-STYLE:SOLID; "; CSS + ="Display:none; "; CSS + ="}";//dynamic load 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 (0). appendchild (style); }} initloading ();return{//Here is a method for external invocationOntab: function (Tabjson) {Ontab (Tabjson); }, Resettab: function () {Resettab (); }, Init: function (Tabjson) {InitTab (Tabjson); }    };} ();

How does the external call? That's it:

FTabPages.init({    "#div_BasicInfo"    true    "http://blog.csdn.net/leftfist"    , params: {}    function () {         alert("Hello World!");    }    });

Copyright NOTICE: This article for Bo Main original 屙 article, like you take away.

Write a front-end wait control in JavaScript