Home > Web Front-end > JS Tutorial > js asynchronous processing progress bar_javascript skills

js asynchronous processing progress bar_javascript skills

WBOY
Release: 2016-05-16 18:30:48
Original
1416 people have browsed it

1. Above the picture first, the effect is as follows:

2. How to use

Copy the code The code is as follows:

var loader=new Ajaxloader(this._ContentID,{Text:'loading...',Top:50});
loader.Show();

3. The code is listed:
Copy the code The code is as follows:

/*
Processing progress bar , Asynchronous loader
*/
var Ajaxloader=new Class();
Ajaxloader.prototype=
{
Text: 'Data loading...',
Parent:null,
Left:0,
Top:30,
Initialize:function(parentid,o)
{
//alert('Init');
Extend (this,o);
if(parentid)
{
this.Parent=$(parentid);
}
return this;
},
Show:function ()
{
if(this.Parent)
{
var _obj = this.Create();
this.Parent.appendChild(_obj);
}
},
Create:function()
{
var _div=document.createElement('div');
var _img=document.createElement('img');
_img.src ='<%=WebResource("DSKJ.Web.UI.WebControls.Images.ajaxloader.gif")%>';
_img.style.cssText='display:block;';
var _load =document.createElement('h3');
_load.innerText = this.Text;
_load.style.cssText='margin-top:5px;font-size:13px';
_div.appendChild (_img);
_div.appendChild(_load);
//Set div style
_div.style.cssText='font-size:13px;text-align:center;margin:0 auto;display :block;z-Index:99';
_div.style.marginTop=this.Top;
return _div;
}
}

4. Conclusion
Welcome to buy bricks
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template