Как сохранить функциональность стиля/наведения гиперссылок изображений в поле шаблона GridView с помощью кнопок ImageButtons

В каждой строке GridView (используя TemplateField) я хотел бы отображать кнопки изображения, которые будут использоваться для управления данными в этой строке. Затем я хотел бы поменять местами изображения кнопок, когда пользователь сначала наводит курсор на строку GridView, а затем снова, когда пользователь наводит курсор на определенную кнопку.

Я могу легко выполнить эту функцию наведения с помощью CSS и гиперссылок изображений, однако при использовании гиперссылок изображений я не могу вызвать какие-либо события на стороне сервера для обработки редактирования конкретной строки.

В прошлом я использовал ImageButtons вместо гиперссылок изображений. Я добавил параметр CommandName в ImageButtons, а затем обработал GridView RowCommand в коде:

<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" />

Однако в этом случае мне также нужно заменить изображение ImageButton, когда пользователь впервые наводит указатель мыши на строку GridView.

Подводя итог, можно сказать, что когда пользователь наводит указатель мыши на строку GridView, кнопки ImageButtons в этой строке меняют изображение1 на изображение2. Затем, когда пользователь наводит курсор на определенную кнопку ImageButton, ее изображение переключается с изображения 2 на изображение 3.

Заранее благодарим за любые предложения, которые могут у вас возникнуть в отношении наилучшего подхода.

-------------------------------------РЕДАКТИРОВАТЬ------------ -----------------------------

Не уверен, что это лучший подход, но я нашел потенциальное решение с использованием 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>

Пока это работает хорошо, но я открыт для предложений по улучшению этого.

Надеюсь, это поможет кому-то еще.


javascript gridview hover imagebutton templatefield
person bham3dman    schedule 14.03.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ваше решение выглядит хорошим!

Для согласованности я бы немного изменил его, чтобы jquery использовался для реализации обоих вариантов поведения при наведении, например. добавив это в ваш существующий скрипт:

$('.btnSelect').hover(
    function () {
        $(this).attr("src", "../images/iconSelect3.png");
    },
    function () {
        $(this).attr("src", "../images/iconSelect2.png");
    }
);
person Merenzo    schedule 08.02.2013