转自:http://blog.csdn.net/yx10/archive/2005/07/18/427766.aspx
效果如下图所示:

[转贴]DataGrid中的高级ToolTip

  实现原理:

     为DataGrid中的每一行,绑定onmouseover、onmousemove、onmouseout事件,使的鼠标移动到行内时,自动显示一个<div>,鼠标移出该行,就把这个<div>隐藏掉。

实现代码:
     前台:
1.   定义<div>的样式:
<style type="text/css">
.transparent { FILTER: alpha(opacity=85);
BORDER-TOP: indianred 1px solid;
BORDER-RIGHT: indianred 1px solid; 
BORDER-LEFT: indianred 1px solid;
BORDER-BOTTOM: indianred 1px solid;
POSITION: absolute;
BACKGROUND-COLOR: infobackground;
DISPLAY: none  }
</style>
2.   显示和隐藏窗体的脚本:
<script language="javascript">
     //显示弹出窗体
     function Show(Country, City, Address, PostalCode, Phone, Fax)
     {
         document.getElementById("td1").innerText="国家:"+Country;
         document.getElementById("td2").innerText="城市:"+City;
         document.getElementById("td3").innerText="地址:"+Address;
         document.getElementById("td4").innerText="邮政编码:"+PostalCode;
         document.getElementById("td5").innerText="电话:"+Phone;
         document.getElementById("td6").innerText="传真:"+Fax;
         //获得鼠标的X轴的坐标
         x = event.clientX + document.body.scrollLeft;
         //获得鼠标的Y轴的坐标
         y = event.clientY + document.body.scrollTop + 20;
         //显示弹出窗体
         Popup.style.display="block";
         //设置窗体的X,Y轴的坐标
         Popup.style.left = x;
         Popup.style.top = y;
     }
     //隐藏弹出窗体
     function Hide()
     {
         //隐藏窗体
         Popup.style.display="none";
     }
</script>
3.   ToolTip窗体的代码
<div );
     }
}

相关文章:

  • 2021-10-21
  • 2022-02-23
  • 2022-12-23
  • 2021-11-28
  • 2022-03-10
猜你喜欢
  • 2021-12-31
  • 2021-10-11
  • 2022-12-23
  • 2022-12-23
  • 2021-11-13
相关资源
相似解决方案