Событие ASP.NET C # OnMouseOver для появления и исчезновения ListBox - PullRequest
Новая
       30

Событие ASP.NET C # OnMouseOver для появления и исчезновения ListBox

1 голос
/ 05 мая 2009

У меня есть одна веб-форма со списком и кнопкой. Когда событие onmousover сработает, появится список; однако при загрузке страницы список не должен отображаться. У меня есть следующий код (прошу прощения за изменение цвета фона): 

Button2.Attributes.Add("onmouseout", 
                       "this.style.backgroundColor='Blue', 
                       ListBox3.style.display ='none'");
Button2.Attributes.Add("onmouseover", 
                       "this.style.backgroundColor='Red',
                       ListBox3.style.display='block'");

Этот код работает, когда listbox.visible имеет значение true. К сожалению, когда страница загружается, список всегда виден, чего я хочу избежать. Когда я устанавливаю в списке значение visible = false, приведенный выше код не работает. Я возился с обратной передачей и использовал операторы if, такие как if (button = red), display = block; впрочем, безрезультатно. Я застрял в этой точке. Кто-нибудь знает, что мне нужно сделать, чтобы приведенный выше код работал? Я новичок в ASP.NET, поэтому я не знаю, нужно ли мне что-то делать с html. Кроме того, один интересный момент, фоновая часть кода работает безупречно.

Я действительно ценю помощь каждого.

Ответы [ 2 ]

3 голосов
/ 05 мая 2009

Когда вы устанавливаете Listbox visible = "false" в коде на стороне сервера, HTML-код для списка не обрабатывается и не отправляется клиенту. Следовательно, вам нужно убедиться, что список выводится, но он не виден при загрузке страницы, либо

  • с первоначальным стилем CSS, который делает список невидимым

или

  • установка его как невидимого при загрузке DOM с использованием JavaScript на клиенте.

Также взгляните на эту статью Отображение и видимость

1 голос
/ 05 мая 2009

Вы можете использовать библиотеку jQuery javascript, чтобы сделать это довольно легко.

Вместо вашего кода у вас будет что-то вроде: 

$('#buttonid').hover(function(){
   $(this).css('background','blue');
   $('#listboxid').hide('fast');
}, function(){
   $(this).css('background','red');
   $('#listboxid').show('fast');
});

Первая функция наведения - наведение мыши, а вторая - наведение мыши. Вы также можете анимировать его, показывая и скрывая, что делает его более гладким.

...