这个组件其实很简单,以前有纯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%;
}
分享到:
相关推荐
winxp安装程序无法打开信息文件fxsocm.inf,请与系统管理员联系.特定的错误代码是2088999411行的0x2"再点确定又提示:不能初始化应用程序 的错误,通过百度、Google后都没发现解决方案,后经过研究得到如下解决方案,...
ExtJs最开始基于YUI技术,由开发人员JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。...
实现各个组件的功能在窗口建立的类中为各个组件添加监听器 " ",并实现监听器,类change、check、Fontext分别为实现查找并替换、查找、 " "字体监听器而建立的类,在类FirstWindow中调用上述三种类中的方法以实现监...
-为空则使用默认的提示信息,默认的提示信息支持多语言,建议一般情况下使用默认信息。 +为表单字段增加MarkInvalid和GetMarkInvalidReference函数(feedback:sun1299shine)。 -增加示例:form/form_validate....
ExtJs最开始基于YUI技术,由开发人员 JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是 一款不可多得的JavaScript客户端技术的精品。 ...
-为空则使用默认的提示信息,默认的提示信息支持多语言,建议一般情况下使用默认信息。 +为表单字段增加MarkInvalid和GetMarkInvalidReference函数(feedback:sun1299shine)。 -增加示例:form/form_validate....
ejb中用ant出错 打包不到build文件夹下提示; Buildfile: G:\eclipseEjb3\Ejb_HelloWorld_02\build.xmlprepare: [mkdir] Created dir: G:\eclipseEjb3\Ejb_HelloWorld_02\buildcompile: [javac] Compiling 3 source...
的信息,这些头信息包含有供接收栈的对等层阅读和处理的控制信息。 A.正确 B.错误 正确答案B 602.下面哪种说法适用于客户机/服务器(或者基于服务器)的网络,但是不适用于对等网络? A.客户机/服务器网络通常...
###ver2.61(2014.7.12)... - 支持代码自动补全(基于文档、或自定义的代码快照) - 快速预览功能 - 优化文件保存完美解决。编码自动识别转换。(字符串转义问题。1&#'[{'"+~%25\\\\ ////) - 文件编辑,添加收藏夹 -...
由安装时的参数决定安装几个目标组件集合。ELDT包是肯定会安装的。 $ export CROSS_COMPILE=ppc_4xx- //加入环境变量 $ PATH=$PATH:/opt/eldk/usr/bin:/opt/eldk/bin //加入PATH 这样加入的话,每次重启系统后必须...