如何在asp.net中的mousehover上顯示一個小窗口

我目前在asp.net工作。我正在顯示員工名單，我希望當用戶將鼠標放在任何員工的圖像上時，它應該在指針旁邊顯示一個小窗口，該窗口顯示該員工來自數據庫的一些詳細信息。請幫助我。下面我附上一張照片即給予什麼，我想如何在asp.net中的mousehover上顯示一個小窗口

enter image description here

來源

2015-01-12 SidraM

嗯，看起來你還沒有代碼，所以你應該尋找一個插件/小部件，像[th是]（http://api.jqueryui.com/tooltip/）或[this]（http://iamceege.github.io/tooltipster/#demos）或您偏好的其他框架/庫。 – DontVoteMeDown

我也在瀏覽另一個名爲qTip的插件。之前沒有使用過它們中的任何一個。看看你的參考。謝謝 – SidraM

我還沒有使用它，但它應該更容易。試試看，如果你有任何問題，你可以在這裏發佈。 – DontVoteMeDown

HTML頁面想法..

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>gridview header</title> 

    <script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script> 

    <script src="jquery.tooltip.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 

     function InitializeToolTip() { 

      $(".gridViewToolTip").tooltip({ 

       track: true, 

       delay: 0, 

       showURL: false, 

       fade: 100, 

       bodyHandler: function() { 

        return $($(this).next().html()); 

       }, 

       showURL: false 

      }); 

     } 

    </script> 

    <script type="text/javascript"> 

     $(function() { 

      InitializeToolTip(); 

     }) 

    </script> 

    <style type="text/css"> 

     #tooltip { 

      position: absolute; 

      z-index: 3000; 

      border: 1px solid #111; 

      background-color: #C2E0FF; 

      padding: 5px; 

      opacity: 0.85; } 

     #tooltip h3, #tooltip div 

     { margin: 0; } 

    </style> 

</head> 

<body> 

    <form id="form1" runat="server"> 

    <div> 

     <asp:GridView ID="gvEmployee" runat="server" AutoGenerateColumns="false" 

      Width="660px" Height="214px"> 

      <HeaderStyle BackColor="#3E3E3E" Font-Names="Calibri" ForeColor="White" /> 

      <RowStyle Font-Names="Calibri" /> 

      <Columns>    

       <asp:TemplateField > 

        <ItemStyle Width="30px" HorizontalAlign="Center" /> 

        <ItemTemplate> 

         <a href="#" class="gridViewToolTip" style="text-decoration: none">Details 

         </a> 

         <div id="tooltip" style="display: none;"> 

          <table> 

           <tr> <td style="white-space: nowrap;"><b>Name:</b>&nbsp;</td> 

            <td><%# Eval("name")%></td></tr> 

           <tr><td style="white-space: nowrap;"><b>City:</b>&nbsp;</td> 

            <td><%# Eval("city")%></td></tr> 

           <tr><td style="white-space: nowrap;"><b>Country:</b>&nbsp;</td> 

            <td> <%# Eval("country")%> </td> </tr> 

           <tr><td style="white-space: nowrap;"><b>Designation:</b>&nbsp;</td> 

            <td><%# Eval("designation")%></td></tr> 

           <tr> <td style="white-space: nowrap;"> <b>Joining date:</b>&nbsp;</td> 

            <td> <%# Eval("joiningdate")%> </td> </tr> 

          </table> 

         </div> 

        </ItemTemplate> 

       </asp:TemplateField> 

       <asp:BoundField DataField="name" HeaderText="Name" /> 

       <asp:BoundField DataField="city" HeaderText="City" /> 

       <asp:BoundField DataField="country" HeaderText="Country" /> 

       <asp:BoundField DataField="designation" HeaderText="Designation" /> 

       <asp:BoundField DataField="joiningdate" HeaderText="Joining date" />     

      </Columns> 

     </asp:GridView> 

    </div> 

    </form> 

</body> 

</html>

CS頁..

using System; 

using System.Collections.Generic; 

using System.Linq; 

using System.Web; 

using System.Web.UI; 

using System.Web.UI.WebControls; 

using System.Data; 

public partial class _Default : System.Web.UI.Page 

{ 

    protected void Page_Load(object sender, EventArgs e) 

    { 

     if (!IsPostBack) 

     { 

      BindData(); 

     } 

    } 

    protected void BindData() 

    { 

     DataSet ds = new DataSet(); 

     ds.ReadXml(Server.MapPath("EmployeeDetails.xml")); 

     if (ds != null && ds.HasChanges()) 

     { 

      gvEmployee.DataSource = ds; 

      gvEmployee.DataBind(); 

     } 

    }  

} 
- See more at: http://www.dotnetfox.com/articles/show-gridview-row-details-in-tooltip-on-mouseover-using-jquery-in-Asp-Net-1

062.aspx＃sthash .kXXvwT39.dpuf

來源

2015-01-12 11:27:16

如何在asp.net中的mousehover上顯示一個小窗口

回答

相關問題