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

  //设置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.结束语

  欢迎拍砖