您的位置: 首页  >  IT文章  >  Ext讯息提示框，显示几秒后自动消失

Ext讯息提示框，显示几秒后自动消失

分类: IT文章 • 2024-03-25 11:12:00
Ext消息提示框，显示几秒后自动消失

封装一个Ext消息提示框，显示几秒后自动消失

分类： Ext 2009-12-23 22:11 2842人阅读 评论(4) 收藏 举报

最近项目需要，封装了一个Ext消息提示框，提示信息显示几秒后就自动消失。

 

css代码：

 

view plaincopy to clipboardprint?
  1. .msg .x-box-mc {  
  2. font-size:14px;  
  3. }  
  4. #msg-div {  
  5.     position:absolute;  
  6.     left:650px;  
  7.     top:410px;  
  8.     width:600px;  
  9.     z-index:20000;  
  10. }  
  11. .msg-close{  
  12. width:10px; height:10px; position:absolute; top:1px; right:10px;cursor:hand;  
  13. }  
  14. .msg-h3 {  
  15. font-size:13px;  
  16.     color:#2870b2;  
  17.     font-weight:bold;  
  18.     margin:10px 0;  
  19. }  

 

 

js代码：

view plaincopy to clipboardprint?
  1. /** 
  2.  *信息提示框，显示后迅速消失 
  3.  */  
  4. Ext.QuickMsg = function(){  
  5.     var msgCt;  
  6.   
  7.     function createBox(t, s,isClose){  
  8.                 var html = new Array();  
  9.   
  10.                 html.push('<div class="msg">');  
  11.                 html.push('<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc">');  
  12.                 html.push('</div></div></div>');  
  13.                 html.push('<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">');  
  14.                 if(t){  
  15.                         html.push('<h3 class="msg-h3">');  
  16.                         html.push(t);  
  17.                         html.push('</h3>');  
  18.                 }  
  19.                 if(isClose){  
  20.                         html.push('<span class="msg-close" onclick="Ext.QuickMsg.close()"><img src="'+closeImageUrl+'" mce_src="'+closeImageUrl+'"/></span>');  
  21.                 }  
  22.                 html.push(s);  
  23.                 html.push('</div></div></div>');  
  24.                 html.push('<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>');  
  25.                 html.push('</div>');  
  26.                 return html.join('');  
  27.     }  
  28.     return {  
  29.         /** 
  30.          * 显示信息 
  31.          * title:标题 
  32.          * msg:提示信息 
  33.          * time：显示时间，超时后自动消失 
  34.          * alignEl：对齐到该对象的左下角 
  35.          * offsets[Array]：横向偏移像素，比如：[200,0]标识右移200个像素 
  36.          * positon：动画 
  37.          * animate[boolean]：是否开启动画  
  38.          * isClose[boolean]：是否可关闭 
  39.          */  
  40.         show : function(title, msg, width, time, alignEl, offsets, position,animate,isClose){                     
  41.         width = width?width:'250px';  
  42.         time = time?time:2;  
  43.         alignEl = alignEl?alignEl:document;  
  44.         //alert(alignEl.id);   
  45.         position = position?position:'t-t';  
  46.         animate = animate?animate:false;  
  47.         this.close();  
  48.             if(!msgCt){  
  49.             msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);  
  50.             msgCt.setWidth(width);  
  51.             }  
  52.             //采用默认动画将div的最中央对齐到alignEl的左下角,并右移200个象素,且不能超出窗口   
  53.             msgCt.alignTo(alignEl, position,offsets,animate);  
  54.         var m = Ext.DomHelper.append(msgCt, {html:createBox(title, msg,isClose)}, true);  
  55.             m.slideIn('t').pause(time).ghost("t", {remove:true});//元素从上滑入效果,可不带参数调用下同     
  56.         },  
  57.   
  58.         //提示信息   
  59.         alert : function(msg,field,alignEl,width){                        
  60.                 width = width?width:'150px';  
  61.                 var html = '<span style="font-size:13px;" mce_style="font-size:13px;">'+msg+'</span>';  
  62.                 this.show('',html,'150px',2,field,[120,0],'t-t',true,false);  
  63.         },  
  64.   
  65.         close: function(){                        
  66.                 var div = document.getElementById('msg-div');  
  67.                 if(div){  
  68.                         div.style.display = 'none';  
  69.                 }                         
  70.                 msgCt = '';                       
  71.         }  
  72.     };  
  73. }();  

相关推荐