Loading Panel Widget 정보
HTML 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!'); });
$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(); } };
추천
0
0
댓글 0개