波斯码BOSSMA Information Technology

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

发布时间:2008年3月2日 / 分类:ASP.NET / 次浏览 / 评论

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

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

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

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

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

先看看效果图:
pagetitletips_view.gif

这个控件的特点:
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('');

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,"
"); Msg=Msg.replace(/\0x13/g,"
"); 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("
","");} var content = '
' + '
' + '
↖'+pltsTitle+'
'+ '
'+ '
'+Msg+'
'+ '
'; 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;
	}

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

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯码,原文地址《ASP.NET自定义控件之Tips提示信息控件(一)

关键字:

建议订阅本站,及时阅读最新文章!
【上一篇】 【下一篇】

发表评论