利用div模仿asp.net的tooltip

一。背景 

       在asp.net开发中，有时候需要为了用户更好的体验，需要实现tool的功能，本来.net本身就有一个这个的属性。但是有时候无法满足要求，于是决定自己弄一个。

二。准备工作

1.数据的获取，这里采取ajax来取得数据源，可以很好的交互。在实际中有很多的方式来，例如如果是在有数据控件的时候(datalist,repeate)等，你可以在Item_Boud的时候就获得数据。

这是是这样处理的：

1.1xmlhttprequest的对象创建，这个很常用的了。

1.2请求数据假设为returnString.(建议用json来进行数据传送，操作可能比较方便 ，当然要看个人习惯)

由于这两步我在JSON 学习 里面的.net例子有差不多的实现，所以不再重复。

1.3div的呈现和控制

function ToolTip(strContent)
{
    var offy=parseInt(event.y);
    var offx=parseInt(event.x);
    var availWidth = parseInt(window.screen.availWidth);
    var availHeight = parseInt(window.screen.availHeight);
    var dvWidth=300;
    var dvHight=400;
    mouseOutOrOver("2")
    var stinner=strContent;
    var obj=document.getElementById('dvTable');
    var strdv="<div id='tooltip' width='"+(dvWidth)+"' height='"+(dvHight)+"'";
    strdv+='style="position:absolute;left:40px;top:30px;z-index:100;';
    strdv+='filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#949694,OffX=4,OffY=4);'
    strdv+='font-family:verdana,Lucida Sans Unicode,宋体,新宋体,sans-serif;font-size:11px;">';
    strdv+="<table id='tddv' width='"+(dvWidth)+"' height='"+(dvHight)+"' border='1' bgcolor='#949694'>";
    strdv+="<tr><td>";
    strdv+=stinner;
    strdv+="</td>";
    strdv+="</tr>";
    strdv+="</table></dv>";   
    obj.innerHTML=strdv;
 var objaa=document.getElementById('tooltip');
 var setDvW=(availWidth-offx)>dvWidth ? offx:(offx-dvWidth);
 var setDvH=(availHeight-offy)>dvHight ? offy:(offy-dvHight);
    objaa.style.pixelLeft = setDvW;
    objaa.style.pixelTop = setDvH;
}

//当鼠标浮动在上方是显示否则隐藏
function mouseOutOrOver(flag)
{
  if("1"==flag)
  {
    document.getElementById('dvTable').style.visibility='hidden';
  }
  if("2"==flag)
  {
    document.getElementById('dvTable').style.visibility='visible';
  }
}

其实很简单的实现。只是总结到在使用asp.net的一些内置的属性和控件时候时候要善于类比而已。