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

时间 2019-12-18

标签 asp.net asp 自定义控件 tips 提示信息栏目 ASP 繁體版

原文原文链接

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

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

先看看效果图：

这个控件的特色：
一、兼容IE和FireFox
二、使用的时候只需从工具箱拖动到页面中一次，页面中具备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;
var getClientHeight=(document.documentElement.clientHeight == 0) ? document.body.clientHeight : document.documentElement.clientHeight;
var getClientWidth=(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;
}

欢迎就这个控件的问题与我讨论