Главная страница Случайная страница
Разделы сайта
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
ImageButton
|
|
Элемент управления ImageButton представляет собой комбинацию элементов Image и Button. Его можно использовать для создания изображений, чувствительных к клику мышки. Щелчок является событием, при наступлении которого выполняется некоторый код:
< asp: ImageButtonid=" imgButton" OnCommand =" SubmitPartl" runat=" server" />ImageButton позволяет достичь эффекта, аналогичного карте изображения. Событие Click позволяет узнать координаты щелчка мыши и реагировать соответственно региону, в котором была нажата мышь. Обработчик события должен принимать аргумент типа ImageClickEventArgs — наследника System.EventArgs. У него есть дополнительные поля X и Y — координаты клика мышки:
protected void ImageButton1_Click(object sender, System.Web.UI.WebControls.ImageClickEventArgs e){// обработка события}Вернемся опять в туристическое агентство. Директор вызвал вас (программиста) и попросил воплотить следующее: на странице с изображением карты Каира необходимо сделать так, чтобы когда пользователь нажимал мышкой в любое место, открывалась карта района, на который он нажал. Всего имеется 9 районов. Все картинки имеют размер 300 на 300 пикселов. Районы одинаковые, расположены в таблице 3 на 3.
Вы пишете:
< %@ Page Language=" C#" %> < script runat=" server" > void Magnify(Object sender, ImageClickEventArgs e) { int x=e.X; int y=e.Y; int row=y/100; // строка, на которую кликнули int col=x/100; // столбец, на который кликнули int count=row*3+col+1; //номер картинки plan.ImageUrl =" Cairo/map-" +count+".jpg"; plan.Enabled = false; // это нужно, чтобы не открывалсядругой район. instruction.Text=" Нажмите Back, чтобы увидеть весь город"; }< /script> < html xmlns=" https://www.w3.org/1999/xhtml" > < head> < /head> < body> < form runat=" server" > < h3> Карта Каира < /h3> < br /> < br /> < asp: Label id=" instruction" runat=" server" > Нажмите мышью на любой район, чтобы увеличить картинку.< /asp: Label> < br /> < br /> < asp: ImageButton id=" plan" onclick=" Magnify" runat=" server" width=" 300" height=" 300" ImageUrl=" Cairo/map.gif" > < /asp: ImageButton> < br /> < br /> < /form> < /body> < /html>А более простое использование — создание красивых нестандартных кнопок. Свойство CommandName используется так же, как и в случае с обычной кнопкой:
Картинки этого примера есть в поставке Visual Studio 2005 Microsoft Visual Studio 8\Common7\IDE\ProjectTemplates\Web\CSharp\1033. Скопируйте их в папку Images вашего проекта и добавьте их в проект.
Эту функцию вставьте в файл отделенного кода:
protected void ImageButton_Click(Object sender, CommandEventArgs e) { switch (e.CommandName) { case " create": // Insert code to create. Message.Text = " Creating "; break; case " add": // Insert code to add. Message.Text = " Adding "; break; case " cancel": // Insert code to cancel. Message.Text = " canceling"; break; } }У первой кнопки установлено свойство ToolTip. Посмотрите страницу в Internet Explorer. Окно с подсказкой появится при наведении на эту кнопку. А вот Opera выводит подсказку для всех кнопок. Но для тех, в которых установлен ToolTip, он выводится на первой строчке. Во второй — адрес.
Рис. 4.1.
У кнопки также показано использование свойства OnClientClick. Оно задает клиентский сценарий, который будет исполняться при нажатии на кнопку без обращения к серверу. Здесь это функция alert языка Javascript — вызов окна с уведомлением.
|
|