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();