封装一个Ext消息提示框，显示几秒后自动消失
分类： Ext 2009-12-23 22:11 2842人阅读 评论(4) 收藏 举报
最近项目需要，封装了一个Ext消息提示框，提示信息显示几秒后就自动消失。
css代码：
view plaincopy to clipboardprint?
.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?
/**
*信息提示框，显示后迅速消失
*/
Ext.QuickMsg = function(){
var msgCt;
function createBox(t, s,isClose){
var html = new Array();
html.push('
');
html.push('
');
html.push('
');
html.push('
');
if(t){
html.push('
');
html.push(t);
html.push('');
}
if(isClose){
html.push('');
}
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 = '';
}
};
}();
封装一个Ext消息提示框，显示几秒后自动消失
分类： Ext 2009-12-23 22:11 2842人阅读 评论(4) 收藏 举报
最近项目需要，封装了一个Ext消息提示框，提示信息显示几秒后就自动消失。
css代码：
view plaincopy to clipboardprint?
.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?
/**
*信息提示框，显示后迅速消失
*/
Ext.QuickMsg = function(){
var msgCt;
function createBox(t, s,isClose){
var html = new Array();
html.push('
');
html.push('
');
html.push('
');
html.push('
');
if(t){
html.push('
');
html.push(t);
html.push('');
}
if(isClose){
html.push('');
}
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 = '';
}
};
}();