封装一个Ext消息提示框，显示几秒后自动消失
分类： Ext 2009-12-23 22:11 2842人阅读 评论(4) 收藏 举报
最近项目需要，封装了一个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"?onclick="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?=?'';???????????????????????
- ????????}??
- ????};??
- }();??