欢迎加入站点基地设计开发交流群:30720409
详细内容
DIV层数据从数据库读出的实现方法
发布日期:2010-09-22     点击:2810     字体:[ ]

我们经常会遇到这样一种情况,就是当鼠标悬停时,显示一个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

用户评论
昵称 
内容  *
验证码   
   
Copyright © 2010 zdbase.com All Rights Reserved. 苏ICP备15039389号-1 可人软件设计