1

GridViewの各行（TemplateFieldを使用）内に、その行のデータを制御するために使用される画像ボタンを表示したいと思います。次に、ユーザーが最初にGridView行にカーソルを合わせたときに、次にユーザーが特定のボタンにカーソルを合わせたときに、ボタンの画像を入れ替えたいと思います。

CSSと画像ハイパーリンクを使用してこのホバー機能を簡単に実行できますが、画像ハイパーリンクを使用すると、特定の行の編集を処理するためのサーバー側イベントを発生させることができません。

以前は、画像のハイパーリンクの代わりにImageButtonsを使用していました。CommandNameパラメーターをImageButtonsに追加してから、GridViewRowCommandをコードで処理しました。

<asp:ImageButton ID="btnSelect" CommandName="select" runat="server" ImageUrl="~/images/iconSelect1.png" />

ホバー時にImageButton画像を変更するために、Javascriptを使用しました。

<asp:ImageButton ID="btnSelect" onmouseover="this.src='../images/iconSelect3.png';" onmouseout="this.src='../images/iconSelect2.png';" runat="server" ImageUrl="~/images/iconSelect1.png" />

ただし、この場合、ユーザーが最初にGridView行自体にカーソルを合わせたときに、ImageButton画像も置き換える必要があります。

要約すると、ユーザーがGridView行にカーソルを合わせると、その行のImageButtonはすべてimage1をimage2に交換します。次に、ユーザーが特定のImageButtonにカーソルを合わせると、その画像がimage2からimage3に切り替わります。

最善のアプローチについての提案を事前に感謝します。

- - - - - - - - - - - - - - - - - - -編集 - - - - - - -----------------------------

これが最善のアプローチかどうかはわかりませんが、jQueryを使用して解決策を見つけることができました。

<ItemTemplate>
    <div class="gvRow">

        <asp:ImageButton ID="btnSelect" CssClass="btnSelect" runat="server" ImageUrl="~/images/iconSelect1.png" onmouseover="this.src='../images/iconSelect3.png';" onmouseout="this.src='../images/iconSelect2.png';" />

    </div>
</ItemTemplate>

<script type="text/javascript">                                         
    $('.gvRow').hover(
        function () {
            $(this).find(".btnSelect").attr("src", "../images/iconSelect2.png");
        },
        function () {
            $(this).find(".btnSelect").attr("src", "../images/iconSelect1.png");
        }
    );
</script>

これまでのところ、これはうまく機能していますが、これをより適切に処理するための提案を受け入れています。

うまくいけば、これは他の誰かを助けるでしょう。

4

1 に答える 1

0

あなたの解決策は良いもののように見えます！

一貫性を保つために、jqueryを使用して両方のホバー動作を実装するように少し調整しました。たとえば、これを既存のスクリプトに追加します。

$('.btnSelect').hover(
    function () {
        $(this).attr("src", "../images/iconSelect3.png");
    },
    function () {
        $(this).attr("src", "../images/iconSelect2.png");
    }
);
于 2013-02-08T00:59:38.227 に答える