0

我对 JQuery 很陌生，取得了一些进展，但现在处于一个角落，所以非常感谢朝着正确的方向轻推。

我有一个 asp.net gridview（在更新面板中），它可以包含任意数量的行。在每一行我有几个显示产品价格和代码的数据绑定标签，在我有一个图像按钮的行上。我想要做的是当单击按钮以在按钮右侧的淡化 Div 中显示一些行数据时。例如，通知用户将商品添加到购物车中。

我已经阅读了行数据并使用行信息淡入了 div。但是很难获得单击按钮的位置，因此我可以将 Div 重新定位在适当的按钮旁边。

这是一些代码：

后面的代码：

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack) 
{ 
    DataTable dt = new DataTable(); 
    dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Item"), new DataColumn("Price"),   new     DataColumn("Code") }); 
    dt.Rows.Add("Shirt", 200, "abc"); 
    dt.Rows.Add("Football", 30, "xyz"); 
    dt.Rows.Add("Bat", 22.5, "sym"); 
    GridView1.DataSource = dt; 
    GridView1.DataBind(); 
}

}

标记：我删除了更新面板，以减少代码大小。

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.master" AutoEventWireup="true"
    CodeFile="test.aspx.cs" Inherits="test" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
        rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Main" runat="Server">
<script type="text/javascript">

    function pageLoad() {
        $("[id*=lnkSelect]").live("click", function () {

            //Get the values
            var code = $("#code").html($(".code", $(this).closest("tr")).html());
            var price = $("#price").html($(".price", $(this).closest("tr")).html());

            //Build the new HTML
            $(code).prepend("<br/>Item: ");
            $(code).append("<br/>Has been<br/>added to your cart.");
            $(code).append("<br/>Price: ");
            $(code).append(price);
            $(".tooltipleft").html(code); //Set the new HTML
            $(".tooltipleft").fadeIn("slow").fadeOut("slow"); //Show the div

            return true;
        });

    };
</script>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="Item"/>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label ID="lblPrice" runat="server" ForeColor="DimGray" CssClass="price" Text='<%# Eval( "Price") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label ID="lblCode" runat="server" ForeColor="DimGray" CssClass="code" Text='<%# Eval( "Code") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ID="lnkSelect" runat="server" ImageUrl="~/Buttons/add_to_cart.png"
                            AlternateText="Add To Cart" ImageAlign="Right" CssClass="buttontag" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    <div class="tooltipleft" id="tooltip">
    </div>
</asp:Content>

将不胜感激任何帮助。

干杯

厘米

4

1 回答 1

0

这应该使您走上正确的轨道：

编辑
在评论中反映我的jsfiddle 

         $("[id*=lnkSelect]").live("click", function () {
             var pos=$("#imgBut1").offset();
             $("#divinquestion").css({"position": "absolute", "display" : "block" }).show().offset({top:pos.top,left:pos.left+35});

          });
于 2012-07-28T20:37:58.937 回答