t

Loading Panel Widget

· 14년 전 · 2916

                                     A YUI Loading Panel Widget


아래를 추가해서 사용하세요.
var loadingPanel = new yuiLoadingPanel();

//loadingPanel.show();
//loadingPanel.show("Processing...");
//loadingPanel.hide();

The user can close the loading box by clicking on the cancel link. If you want to handle this situation, you can subscribe to the cancelEvent:

loadingPanel.cancelEvent.subscribe(function(e, a, o){
  alert('You clicked cancel!');
});

loadingpanel.js:

$D = YAHOO.util.Dom;
$E = YAHOO.util.Event;
var yuiLoadingPanel = function(conf){
    conf = conf == undefined ? new Array() : conf;
    conf.id = conf.id == undefined ? 'yuiLoadingPanel':confi.id;
    conf.header = conf.header == undefined ? 'Loading, please wait...':conf.header;
    conf.width = conf.width == undefined ? '240px':conf.width;
    this.conf = conf;
    this.cancelEvent = new YAHOO.util.CustomEvent("cancelEvent", this);
    this.init();
	
};

yuiLoadingPanel.prototype = {
    init:function(){
        var loadingPanel = new YAHOO.widget.Panel(this.conf.id,{
            width:this.conf.width,
	    fixedcenter:true,
            close:false,
            draggable:false,
            modal:true,
            visible:false
        });
    
       loadingPanel.setBody(this.conf.header + 
               '<img src="http://us.i1.yimg.com/us.yimg.com/i/us/per/gr/gp/rel_interstitial_loading.gif" />');
               loadingPanel.render(document.body);
               $D.addClass(loadingPanel.id, 'tcc_lightboxLoader');
               var cancelLink = document.createElement('a');
               $D.setStyle(cancelLink, 'cursor', 'pointer');
               cancelLink.appendChild(document.createTextNode('Cancel'));
               $E.on(cancelLink, 'click', function(e, o){
       	           o.self.loadingPanel.hide();
       	           o.self.cancelEvent.fire();
               }, {self:this});
               loadingPanel.appendToBody(document.createElement('br'));
               loadingPanel.appendToBody(cancelLink);
               $D.setStyle(loadingPanel.body, 'text-align', 'center');
               $D.addClass(document.body, 'yui-skin-sam');
        this.loadingPanel = loadingPanel;
    },
    show:function(text){
        if(text != undefined){
            this.loadingPanel.setHeader(text);
        }else{
	    this.loadingPanel.setHeader(this.conf.header);
	}
	this.loadingPanel.show();
    },
    hide:function(){
        this.loadingPanel.hide();
    }
};


|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
HTML 14년 전 조회 2,664
HTML 14년 전 조회 2,709
HTML 14년 전 조회 4,869
HTML 14년 전 조회 3,903
HTML 14년 전 조회 6,547
기타 14년 전 조회 3,780
HTML 14년 전 조회 3,078
기타 14년 전 조회 4,417
HTML 14년 전 조회 3,048
JavaScript 14년 전 조회 2,644
JavaScript 14년 전 조회 2만
기타 14년 전 조회 5,409
HTML 14년 전 조회 2,849
HTML 14년 전 조회 4,032
HTML 14년 전 조회 2,917
HTML 14년 전 조회 2,187
HTML 14년 전 조회 2,107
HTML 14년 전 조회 2,646
HTML 14년 전 조회 2,285
HTML 14년 전 조회 4,524
HTML 14년 전 조회 2,895
HTML 14년 전 조회 2,816
HTML 14년 전 조회 2,300
HTML 14년 전 조회 2,518
HTML 14년 전 조회 2,401
HTML 14년 전 조회 3,528
HTML 14년 전 조회 2,990
HTML 14년 전 조회 5,978
HTML 14년 전 조회 2,551
HTML 14년 전 조회 2,514