jquery - gridview中的jQuery弹出div

Question

我想为gridview行添加jQuery弹出窗口以进行描述，即我想在将鼠标移动到描述时显示弹出窗口，然后必须在弹出窗口中显示描述

Answer 1

简直就是这样

风格

<style>
        .HoverDesc{
            Position:relative;
        }

        .HoverDesc Strong{
            display:block;
            line-height:20px;
            white-space:nowrap;
            cursor:pointer;
        }
        .HoverDesc p{
            z-index:5;
            display:none;
            padding:10px;
            margin:0;
            background:#ccc;
            position:absolute;
            top:20px;
            left:0;
            width:200px;
        }
    </style>

jQuery 包含

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
    jQuery(document).ready(function($) {
        $('.HoverDesc').hover(function() {
            $(this).find('p').show(200);
        }, function() {
            $(this).find('p').hide(100);
        });
    });
 </script>

ASPX 网格视图

仅显示一个示例列

 <asp:GridView runat="server" ID="GridView1">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>

                <div class="HoverDesc">
                    <strong>Description..</strong>
                    <p>
                        <%# Bind("Description") %>
                    </p>
                </div>

            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    </asp:GridView>

Answer 2

使用 jQuery ui 弹出窗口（下载这些脚本）：

<script type="text/javascript" src="Script/jquery1.7.1.min.js"> </script>
<link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Script/jquery-ui.1.9.2.min.js"></script>

为图像添加 CSS 类

<asp:Image ID="imgAlert" ImageUrl="~/images/alert16.gif" Height="12" Width="12"  runat="server" CssClass="imgClass" />

.cs在 gridview_RowDataBound 事件中从页面添加属性，例如

imgAlert.Attributes.Add("title", "Your Description");

然后添加弹出功能

$(function () {
  $('.imgClass').tooltip({
                position: {
                    my: "center+10 top-2",
                    at: "center+130 center+25",
                    using: function (position, feedback) {
                        $(this).css(position);
                        $("<div>")
                        .addClass("arrow")
                        .addClass(feedback.vertical)
                        .addClass(feedback.horizontal)
                        .appendTo(this);
             }
         }
    });
});