《封装一个Ext消息提示框,显示几秒后自动消失.docx》由会员分享，可在线阅读，更多相关《封装一个Ext消息提示框,显示几秒后自动消失.docx（5页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、封装了一个Ext消息提示框，提示信息显示几秒后就自动消失。css代码：view plaincopy to clipboardprint?1. .msg.x-box-mc2. font-size:14px;3. 4. #msg-div5. position:absolute;6. left:650px;7. top:410px;8. width:600px;9. z-index:20000;10. 11. .msg-close12. width:10px;height:10px;position:absolute;top:1px;right:10px;cursor:hand;13. 14. .m
2、sg-h315. font-size:13px;16. color:#2870b2;17. font-weight:bold;18. margin:10px0;19. js代码：view plaincopy to clipboardprint?1. /*2. *信息提示框，显示后迅速消失3. */4. Ext.QuickMsg=function()5. varmsgCt;6. 7. functioncreateBox(t,s,isClose)8. varhtml=newArray();9. 10. html.push();11. html.push();12. html.push();13.
3、html.push();14. if(t)15. html.push();16. html.push(t);17. html.push();18. 19. if(isClose)20. html.push();21. 22. html.push(s);23. html.push();24. html.push();25. html.push();26. returnhtml.join();27. 28. return29. /*30. *显示信息31. *title:标题32. *msg:提示信息33. *time：显示时间，超时后自动消失34. *alignEl：对齐到该对象的左下角35.
4、*offsetsArray：横向偏移像素，比如：200,0标识右移200个像素36. *positon：动画37. *animateboolean：是否开启动画38. *isCloseboolean：是否可关闭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);
5、 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
6、);54. varm=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. varhtml=+msg+;62. this.show(,html,150px,2,field,120,0,t-t,
7、true,false);63. ,64. 65. close:function()66. vardiv=document.getElementById(msg-div);67. if(div)68. div.style.display=none;69. 70. msgCt=;71. 72. ;73. ();调用示例1：简单提示Ext.QuickMsg.alert(错误,数据保存出错！);显示效果：调用示例2：更复杂的效果view plaincopy to clipboardprint?1. vars=;2. s+=;3. s+=;4. s+=姓名;5. s+=年龄;6. s+=性别;7. s+=;8. s+=;9. s+=张三;10. s+=19;11. s+=男;12. s+=;13. s+=;14. s+=李四;15. s+=30;16. s+=女;17. s+=;18. s+=;19. 20. Ext.QuickMsg.show(人员详细信息,s,600px,2,Ext.get(tog),200,0,t-t,true,true);21.