0

私はJQueryを初めて使用し、ある程度の進歩を遂げましたが、今は隅にいるので、正しい方向に少しずつ進んでいただければ幸いです。

任意の数の行を含めることができる asp.net グリッドビュー (更新パネル内) があります。各行には、製品の価格とコードを示すデータバインドされたラベルがいくつかあり、行には画像ボタンもあります。私がやろうとしているのは、ボタンをクリックして、ボタンの右側にフェードインされた 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>

助けていただければ幸いです。

乾杯

CM

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 に答える