Chinaunix首页 | 论坛 | 博客

28270951的ChinaUnix博客

首页　| 　博文目录　| 　关于我

28270951

  • 博客访问： 3775
  • 博文数量： 1
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 20
  • 用 户 组： 普通用户
  • 注册时间： 2013-08-17 14:50
文章分类

全部博文（1）

文章存档

2013年（1）

我的朋友
最近访客
推荐博文
Ext消息提示框，显示几秒后自动消失

分类： JavaScript

2013-09-23 23:19:31

封装一个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. }  
.msg .x-box-mc { font-size:14px; } #msg-div { position:absolute; left:650px; top:410px; width:600px; z-index:20000; } .msg-close{ width:10px; height:10px; position:absolute; top:1px; right:10px;cursor:hand; } .msg-h3 { font-size:13px; color:#2870b2; font-weight:bold; margin:10px 0; }


 

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('');  
  11.                 html.push('');  
  12.                 html.push('
');  
  •                 html.push('');  
  •                 if(t){  
  •                         html.push('');  
  •                         html.push(t);  
  •                         html.push('');  
  •                 }  
  •                 if(isClose){  
  •                         html.push('+closeImageUrl+'" mce_src="'+closeImageUrl+'"/>');  
  •                 }  
  •                 html.push(s);  
  •                 html.push('
    • ');  
  •                 html.push('
    • ');  
  •                 html.push('');  
  •                 return html.join('');  
  •     }  
  •     return {  
  •         /** 
  •          * 显示信息 
  •          * title:标题 
  •          * msg:提示信息 
  •          * time：显示时间，超时后自动消失 
  •          * alignEl：对齐到该对象的左下角 
  •          * offsets[Array]：横向偏移像素，比如：[200,0]标识右移200个像素 
  •          * positon：动画 
  •          * animate[boolean]：是否开启动画  
  •          * isClose[boolean]：是否可关闭 
  •          */  
  •         show : function(title, msg, width, time, alignEl, offsets, position,animate,isClose){                     
  •         width = width?width:'250px';  
  •         time = time?time:2;  
  •         alignEl = alignEl?alignEl:document;  
  •         //alert(alignEl.id);   
  •         position = position?position:'t-t';  
  •         animate = animate?animate:false;  
  •         this.close();  
  •             if(!msgCt){  
  •             msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);  
  •             msgCt.setWidth(width);  
  •             }  
  •             //采用默认动画将div的最中央对齐到alignEl的左下角,并右移200个象素,且不能超出窗口   
  •             msgCt.alignTo(alignEl, position,offsets,animate);  
  •         var m = Ext.DomHelper.append(msgCt, {html:createBox(title, msg,isClose)}, true);  
  •             m.slideIn('t').pause(time).ghost("t", {remove:true});//元素从上滑入效果,可不带参数调用下同     
  •         },  
  •   
  •         //提示信息   
  •         alert : function(msg,field,alignEl,width){                        
  •                 width = width?width:'150px';  
  •                 var html = ''+msg+'';  
  •                 this.show('',html,'150px',2,field,[120,0],'t-t',true,false);  
  •         },  
  •   
  •         close: function(){                        
  •                 var div = document.getElementById('msg-div');  
  •                 if(div){  
  •                         div.style.display = 'none';  
  •                 }                         
  •                 msgCt = '';                       
  •         }  
  •     };  
  • }();  
    • 阅读(1746) | 评论(0) | 转发(0) |
    0

    上一篇：没有了

    下一篇：没有了

    给主人留下些什么吧！~~
    关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

    Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

    感谢所有关心和支持过ChinaUnix的朋友们

    16024965号-6