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에 작은 창을 표시하는 방법

답변

관련 문제