基于Ext实现的信息提示组件

这个组件其实很简单，以前有纯js写过，不过当时做的比较简单，只是一个显示然后是自动渐隐消失，这次用Ext实现了一下，代码有了些减少，而且功能上也改善了一点，增加“标题设置”和“关闭按钮”的功能。

功能简介：
1、自定义显示内容和显示标题。
2、可配置消失时间，如n秒后自动渐隐消失，或者永远不消失（通过关闭按钮关闭）。
3、可配置显示位置：支持绝对定位像素设定、百分比设定，及top,left,right,bottom四个特殊位置参数的设定。
4、通过四个特殊位置参数设定后当页面滚动时永远保持在浏览器的特定位置，如top,left不不论如何滚动滚动条都会悬浮在左上角。
5、支持自定义外观，完全的样式与实现分离。

使用简介：
函数：showTip(message,x,y,delay,title)
必选参数message:消息内容
可选参数x/y 显示消息框的坐标,默认为左上角，参数x可配置为数字、left和right或百分比,y可配置为数字、top或bottom或百分比。
可选参数delay:延迟多长时间消失，-1为永不消失，单位为秒
可选参数title:设定pop提示的标题，如果不设定则不显示标题

function showTip(message, x, y, delay, title) {
        if(!message) return;
        // 只允许百分数或数值参数
        x=/\d{1,2}%|100%|left|right/.test(x)?x:(parseInt(x)||0)+"px";
        y=/\d{1,2}%|100%|top|bottom/.test(y)?y:(parseInt(y)||0)+"px";
        delay=parseInt(delay) || -1;
        var fdDiv=Ext.get('show_feedBack');
        if(!fdDiv){
            fdDiv=Ext.DomHelper.append(document.body,{
                tag:'div',
                id:'show_feedBack',
                style:'z-index:10000;width:0;filter:alpha(opacity=100);position:absolute;'
            }, true);
            Ext.DomHelper.append('show_feedBack',{
                tag:'div',
                id:'show_feedBack_message',
                style:'white-space:nowrap'
            }, true);
            var sfm=Ext.DomHelper.append('show_feedBack',{
                tag:'div',
                id:'show_feedBack_menubar',
                children:[{
                    tag:'div',
                    id:'show_feedBack_title'
                },{
                    tag:'img',
                    src:Ext.BLANK_IMAGE_URL,
                    id:'show_feedBack_closeImg',
                    title:'关闭'
                }]
            }, true);
            Ext.get('show_feedBack_closeImg').on('click',function(){
                fdDiv.setDisplayed(false)
            });
        }
        Ext.getDom('show_feedBack_title').innerHTML=title||'';

        var fdDivContent=fdDiv.first('div'); // 内容域
        fdDiv.stopFx();
        fdDiv.setLeftTop(0,0);
        fdDivContent.dom.innerHTML='';
        fdDivContent.insertHtml('afterBegin', message);
        fdDiv.setDisplayed(true);
        Ext.get('show_feedBack_menubar').setWidth(fdDivContent.getWidth());

        var x1=x, y1=y;
        function calPos(){ // 如果是left/top/right/bottom参数则计算位置
            var doc=Ext.getBody().getViewSize();
            var scroll=Ext.getBody().getScroll();
            if (/left|right/.test(x1)) {
                x=(x1=="left")?0:(doc.width-fdDiv.getWidth());
                x=x+scroll.left;
            }
            if (/top|bottom/.test(y1)) {
                y=(y1 == "top")?0:(doc.height-fdDiv.getHeight());
                y=y+scroll.top;
            }
            fdDiv.setLeftTop(x, y);
        };
        try{
            clearInterval(tui.showTip.repos)
        } catch (e) {}
        if(/left|right/.test(x1)||/top|bottom/.test(y1)) {
            tui.showTip.repos=setInterval(calPos, 1); // 每隔0.1秒定位一次层
        }else{ // 数值或百分比
            fdDiv.setLeftTop(x, y)
        }
        fdDiv.setOpacity(1);

        // 渐隐效果
        if (delay!=-1) {
            fdDiv.pause(delay).fadeOut({
                endOpacity:0,
                useDisplay:true,
                duration:3
            });
        }
    }



CSS源码：

#show_feedBack {
  border: 1px solid #CAA700;
  background: #FFFFA2;
}
#show_feedBack_message{
  line-height: 18px;
  padding: 3px;
  font-size: 12px;
}
#show_feedBack_menubar{
  height:20px;line-height:20px;
  border-top:1px solid #CAA700;
  padding-left:5px;font-weight:bold;
}
#show_feedBack_title{
  float:left;font-size:12px
}
#show_feedBack_closeImg{
  width:16px;height:20px;float:right;cursor:pointer;
  background:url(../../images/qtip/closeBtn.gif) no-repeat 50% 50%;
}