js ajax进度条,js 异步处理进度条

1.先上图，效果如下：

2.使用方法

复制代码 代码如下:

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

loader.Show();

3.代码列出：

复制代码 代码如下:

/*

处理进度条，异步加载器

*/

var Ajaxloader=new Class();

Ajaxloader.prototype=

{

Text:'数据加载中......',

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='';

_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);

//设置div样式

_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.结束语

欢迎拍砖