前几日改造了项目中用到的Ext的消息弹框的代码,将其封装为一个组件,并定义了新的可以自动消失的函数。编写该组件对自己深入理解JavaScript闭包的概念、尝试使用和解析Json格式的函数参数,以及动态改变HTML元素样式等新知识都很有帮助。
代码如下:
/**
* @author NearEast 2012-05-28
* 可利用单例模式构建Ext自定义组件
* title: 消息框的标题,默认"警告"
* ctStyle: 消息框容器(弹框区域div)的样式,json格式,例如:{top:'5px',left:'5px'}; 默认宽度250,垂直位置为top,水平位置为right:5px
* */
function CustomMsgBox(title, ctStyle, closeImageUrl) {
if(undefined == title){
title = "警告";
}
var width = null;
if(undefined != ctStyle){
if(typeof ctStyle != 'object'){
alert('ctStyle format error:must be a json object');
return;
}else{
width = ctStyle.width;
}
}
if(undefined == width || typeof width != "number"){
width = 250;
}
if(undefined == closeImageUrl || typeof closeImageUrl != "string"){
closeImageUrl = '../examples/shared/icons/fam/cross.gif';
}
var msgCt;
var idCnt=0;
/* var name = /function\s+(.+?)\(/.exec(arguments.callee)[1];*/
function createBox(text,id) {
return [
'<div id="' + id + '" class="CustomMsgBox">',
'<div class="x-box-tl" ><div class="x-box-tr"><div class="x-box-tc" style="width:' + (width-15) + 'px"></div></div></div>',
'<div class="x-box-ml" ><div class="x-box-mr"><div class="x-box-mc" style="width:' + (width-28) + 'px">',
'<b style="font-size:medium;text-decoration:blink">' + title + '</b>',
'<span class="msg-close" style="position:absolute;right:10px" οnclick="cusMsgBoxClose(\'' + id + '\')">',
'<img src="' + closeImageUrl + '"/></span>',
'<h3 style="margin-top:5px;color:rgb(0,0,255)" >'+ text +'</h3>',
'</div></div></div>',
'<div class="x-box-bl""><div class="x-box-br"><div class="x-box-bc" style="width:' + (width-15) + 'px"></div></div></div>',
'</div>' ].join('');
}
return {
/**创建一个提示框
* text: 提示的文本
* id: 消息id;如果没有指定id,则自动生成
*/
msg : function(text, id) {
if(undefined==id){
var id = '_i_MB' + idCnt++;
}
if (!msgCt) {
msgCt = Ext.DomHelper.insertFirst(
document.body,{
id : 'msg-div'+Math.random()*100,
style : 'position:absolute;z-index:10001;bottom:5px;right:5px;width:' + width + 'px'
}, true);
if(undefined != ctStyle){
for(var s in ctStyle){
if (ctStyle.hasOwnProperty(s)) {
msgCt.dom.style[s] = ctStyle[s];
}
}
}
}
Ext.DomHelper.append(msgCt, {
html : createBox(text, id)
}, true);
},
/**创建一个提示框,如果用户没有关闭,则一定时间之后自动关闭
* delay: 显示的最大时长,默认为5秒
*/
tip: function(text, id, delay){
if(undefined==delay || typeof delay != "number"){
delay = 5000;
}
if(undefined==id){
var id = '_i_MB' + idCnt++;
}
this.msg(text, id);
setTimeout(function(){
cusMsgBoxClose(id);
}, delay);
}
};
};
function cusMsgBoxClose(id){
var div = document.getElementById(id).parentNode;
if (div) {
div.style.display = 'none';
div.parentNode.removeChild(div);
}
}
首先定义一个CustomMsgBox函数,函数的执行结果是返回一个闭包。该闭包有两个函数msg和tip,分别用于弹出一个固定的,或者显示一定时间自动关闭的消息提示框。为充分解耦,单独定义了一个cusMsgBoxClose函数,来对应弹框的关闭操作。也许还有更好的方法,可以将关闭操作也封装到闭包中,有空可以研究一下。
使用方法:
Ext.onReady(function(){
if(undefined === CustomMsgBox){
alert('\tError:\nFile "customMsgBox.js" needed!');
return;
}
Ext.ux.VehicleOfflineMsgBox = new CustomMsgBox('上下线提醒', {top:'5px',left:'5px'});
Ext.ux.VehicleOfflineMsgBox.msg('<i>Text</i>');
Ext.ux.VehicleOfflineMsgBox.tip('上线了',null,3000);
});
效果如下图所示: