jquery - gridviewのjQueryポップアップdiv

Question

説明のためにグリッドビュー行の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 グリッドビュー

サンプル列を 1 つだけ表示する

 <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);
             }
         }
    });
});