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

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

 

css代码：

 

.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代码：

/** *信息提示框，显示后迅速消失 */ Ext.QuickMsg = function(){ var msgCt; function createBox(t, s,isClose){ var html = new Array(); html.push('<div class="msg">'); html.push('<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc">'); html.push('</div></div></div>'); html.push('<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">'); if(t){ html.push('<h3 class="msg-h3">'); html.push(t); html.push('</h3>'); } if(isClose){ html.push('<span class="msg-close" οnclick="Ext.QuickMsg.close()"><img src="'+closeImageUrl+'" mce_src="'+closeImageUrl+'"/></span>'); } html.push(s); html.push('</div></div></div>'); html.push('<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>'); html.push('</div>'); 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 = '<span style="font-size:13px;" mce_style="font-size:13px;">'+msg+'</span>'; 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 = ''; } }; }();

 

调用示例1：简单提示

Ext.QuickMsg.alert('错误','数据保存出错！');

显示效果：

 

调用示例2：更复杂的效果

 

var s = ""; s += '<table class="rowinsertarea" style="width:560px;" cellspacing="0" cellpadding="5">'; s += '<tr>'; s += ' <td class="tablealigntext" style="background-color:#efefef" mce_style="background-color:#efefef" width="20%">姓名</td>'; s += ' <td class="tablealigntext" style="background-color:#efefef" mce_style="background-color:#efefef" width="20%">年龄</td>'; s += ' <td class="tablealigntext" style="background-color:#efefef" mce_style="background-color:#efefef" width="20%">性别</td>'; s += '</tr>'; s += '<tr>'; s += ' <td class="tablealigntext">张三</td>'; s += ' <td class="tablealigntext">19</td>'; s += ' <td class="tablealigntext">男</td>'; s += '</tr>'; s += '<tr>'; s += ' <td class="tablealigntext">李四</td>'; s += ' <td class="tablealigntext">30</td>'; s += ' <td class="tablealigntext">女</td>'; s += '</tr>'; s += '</table>'; Ext.QuickMsg.show('人员详细信息', s,'600px',2,Ext.get('tog'),[200,0],'t-t',true,true);

 

显示效果：