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

Ext消息提示框，显示几秒后自动消失
2842人阅读 评论(4) .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代码：

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