js 비동기 처리 진행 bar_javascript 기술

1. 먼저 위 사진의 효과는 다음과 같습니다.

2. 사용방법

코드를 복사하세요 코드는 다음과 같습니다

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

3. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

/ *
처리 진행률 표시줄, 비동기 로더
*/
var Ajaxloader=new Class()
Ajaxloader.prototype=
{
텍스트: '데이터 로드 중...',
Parent:null,
Left:0,
Top:30,
Initialize:function(parentid,o)
{
//alert('Init')
확장(this,o);
if(parentid)
{
this.Parent=$(parentid)
}
return this; :function ()
{
if(this.Parent)
{
var _obj = this.Create()
this.Parent.appendChild(_obj)}
},
생성:function()
{
var _div=document.createElement('div')
var _img=document.createElement('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'; .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. 결론
벽돌 구입을 환영합니다