我们经常会遇到这样一种情况，就是当鼠标悬停时，显示一个DIV层，而该层里的数据是从数据库读取的，本文就介绍该效果的实现方法：
前台:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="NET_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>鼠标移过Div层显示层中信息由数据库中提出</title>
<mce:script type="text/javascript"><!--
function showTip(oEvent,obj){
var oDiv = document.getElementById("divTip1");
NET_Default.ReturnTable(obj,callback);
oDiv.style.visibility="visible";
oDiv.style.left = oEvent.clientX-25;
oDiv.style.top =oEvent.clientY-35;
}
function hideTip(oEvent){
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "hidden";
}
function callback(res)
{
if(res!=null)
{
document.getElementById("divTip1").innerHTML=res.value;
}
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<table>
<tr>
<td>姓名</td>
<td onmouseover="showTip(event,’<%#Eval("UserName") %>’)" onmouseout="hideTip(event)"><%#Eval("UserName") %></td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
<div id="divTip1"
style="background:yellow; position:absolute; visibility:hidden; padding: 5px" mce_style="background:yellow; position:absolute; visibility:hidden; padding: 5px">
</div>
</form>
</body>
</html>
后台代码:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class NET_Default : System.Web.UI.Page
{
DataTable DT = new DataTable();
DataColumn DC = new DataColumn();
DataRow DR;
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(NET_Default));
if (!Page.IsPostBack)
{
CreateDataTable();
for (int i = 0; i < 3; i++)
{
DR = DT.NewRow();
DR["ID"] = i.ToString();
DR["UserName"] ="站点基地" + i.ToString();
DR["Keyword"] = "欢迎你ws_hgo" + i.ToString();
DT.Rows.Add(DR);
}
}
DataList1.DataSource = DT;
DataList1.DataBind();
}
public void CreateDataTable()
{
DC = new DataColumn();
DC.ColumnName = "ID";
DC.DataType = System.Type.GetType("System.Int32");
//DC = new DataColumn("ID", System.Type.GetType("System.Int32"));
DT.Columns.Add(DC);
DC = new DataColumn();
DC.ColumnName = "UserName";
DC.DataType = System.Type.GetType("System.String");
DT.Columns.Add(DC);
DC = new DataColumn();
DC.ColumnName = "Keyword";
DC.DataType = System.Typ