ASP.NET自定义控件之Tips提示信息控件 (一)

来源：互联网发布：中国联通云计算公司编辑：程序博客网时间：2024/05/22 07:44

ASP.NET自定义控件之Tips提示信息控件(一)

2008年3月2日 163 Views

评论发表评论

经常在网页上看到这样的效果：
将鼠标放到某个链接或某个区域，就会在鼠标附近弹出一个提示框，里边显示相关提示信息。

在网上找了大量相关类似代码，但是普遍存在浏览器不兼容的问题。没办法，只好修改。

现在这个控件终于调试得差不多了，贡献出来，大家分享。
控件名称:PageTitleTips

[[控件下载(dll文件)]]

[注：下载包含本人全部控件，全部免费使用，如果您需要额外的服务，请给我发电子邮件:bossma@yeah.net]

先看看效果图：

这个控件的特点：
1、兼容IE和FireFox
2、使用的时候只需从工具箱拖动到页面中一次，页面中具有title属性的可见标签都会有这个效果

主要源代码javascript，如果你不使用本控件，也可以把这个javascript添加到页面中达到同样的目的：

var pltsPop=null;
var pltsoffsetX = 10; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适
var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离；3-12 合适
var pltsPopbg="#FFFFEE"; //背景色
var pltsPopfg="#111111"; //前景色
var pltsTitle="";
document.write('<div id="pltsTipLayer" style="display: none;position: absolute; z-index:10001"></div>');
function pltsinits()
{
document.onmouseover = plts;
document.onmousemove = moveToMouseLoc;
}
function plts(evt)
{
if(evt==null){
evt=window.event;
}
var pltsTipLayer=document.getElementById("pltsTipLayer");
var o = evt.srcElement?evt.srcElement:evt.target;
var getClientWidth=(document.documentElement.clientWidth == 0) ? document.body.clientWidth : document.documentElement.clientWidth;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
pltsPop=o.dypop;
if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
{
pltsTipLayer.style.left=-1000+"px";
pltsTipLayer.style.display='';
var Msg=pltsPop.replace(//n/g,"<br/>");
Msg=Msg.replace(//0x13/g,"<br/>");
var re=//{(.[^/{]*)/}/ig;
if(!re.test(Msg))pltsTitle="简介";
else{
re=//{(.[^/{]*)/}(.*)/ig;
pltsTitle=Msg.replace(re,"$1")+" ";
re=//{(.[^/{]*)/}/ig;
Msg=Msg.replace(re,"");
Msg=Msg.replace("<br/>","");}
var content =
'<table id="toolTipTalbe"><tr><td>' +
'<div id="pltsPoptop" class="tipstitle">' +
'<div id="topleft"><div style="text-align:left;">↖'+pltsTitle+'</div></div><div id="topright" style="display:none;"><div style="text-align:right;">'+pltsTitle+'↗</div></div>'+
'</div>'+
'<div class="tipsbody">'+Msg+'</div>'+
'<div id="pltsPopbot" class="tipstitle" style="display:none;">'+
'<div id="botleft"><div style="text-align:left;">↙'+pltsTitle+'</div></div><div id="botright" style="display:none;"><div style="text-align:right;">'+pltsTitle+'↘</div></div>'+
'</div></td></tr></table>';
document.getElementById("pltsTipLayer").innerHTML=content;
document.getElementById("toolTipTalbe").style.width=Math.min(pltsTipLayer.clientWidth,getClientWidth/2.2)+"px";
moveToMouseLoc(evt);
return true;
}
else
{
pltsTipLayer.innerHTML='';
pltsTipLayer.style.display='none';
return true;
}
}
function moveToMouseLoc(evt)
{
if(evt==null){
evt=window.event;
}
var pltsTipLayer=document.getElementById("pltsTipLayer");
if(pltsTipLayer.innerHTML=='')return true;
var MouseX = evt.x ? evt.x : evt.pageX;
var MouseY = evt.y ? evt.y : evt.pageY;
//window.status=event.y;
var popHeight=pltsTipLayer.clientHeight;
var popWidth=pltsTipLayer.clientWidth;
var popTopAdjust=0;
var popLeftAdjust=0;
vargetClientHeight=(document.documentElement.clientHeight == 0) ?document.body.clientHeight : document.documentElement.clientHeight;
vargetClientWidth=(document.documentElement.clientWidth == 0) ?document.body.clientWidth : document.documentElement.clientWidth;
if(MouseY+pltsoffsetY+popHeight>getClientHeight)
{
popTopAdjust=-popHeight-pltsoffsetY*1.5;
document.getElementById("pltsPoptop").style.display="none";
document.getElementById("pltsPopbot").style.display="";
}
else
{
document.getElementById("pltsPoptop").style.display="";
document.getElementById("pltsPopbot").style.display="none";
}
if(MouseX+pltsoffsetX+popWidth>getClientWidth)
{
popLeftAdjust=-popWidth-pltsoffsetX*2;
document.getElementById("topleft").style.display="none";
document.getElementById("botleft").style.display="none";
document.getElementById("topright").style.display="";
document.getElementById("botright").style.display="";
}
else
{
document.getElementById("topleft").style.display="";
document.getElementById("botleft").style.display="";
document.getElementById("topright").style.display="none";
document.getElementById("botright").style.display="none";
}
var ptleft=0;
var pttop=0;
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
ptleft = MouseX + pltsoffsetX + popLeftAdjust;
pttop = MouseY + pltsoffsetY + popTopAdjust;
} else{
ptleft = MouseX + pltsoffsetX + document.body.scrollLeft + document.documentElement.scrollLeft + popLeftAdjust;
pttop = MouseY + pltsoffsetY + document.body.scrollTop + document.documentElement.scrollTop + popTopAdjust;
}
pltsTipLayer.style.left = ptleft + "px";
pltsTipLayer.style.top = pttop + "px";
return true;
}
pltsinits();

还有一个样式表文件：

#toolTipTalbe{
font-family:宋体;
font-size:12px;
line-height:15px;
FILTER:alpha(opacity=90) shadow(color=#bbbbbb,direction=135);
-moz-opacity:0.9;
opacity:0.9;
border-width:0px;
width:260px;
}
.tipsbody{
background-color: #B1EA45;
padding-left:14px;
padding-right:14px;
padding-top:6px;
padding-bottom:6px;
line-height:135%;
}
.tipstitle{
background-color: #333333;
font-weight:bold;
color:#ffffff;
width:100%;
height:19px;
line-height:19px;
border-width:0px;
}