До выпуска браузера Microsoft IE 5.0 самой большой проблемой, с которой приходилось сталкиваться в веб-программировании, было невозможность простого создания компонентов, обеспечивающих повторное использование кода и совместное использование нескольких страниц. Эта проблема всегда беспокоила программистов веб-страниц DHTML (динамический HEML). Они могут только переписывать коды HTML, CSS и JAVASCRIPT для выполнения повторяющихся или похожих функций на нескольких страницах. С момента выпуска браузера IE 5.0 эта ситуация была улучшена. Он принес нам новый метод комбинации инструкций, который может инкапсулировать код, реализующий определенные функции, в компоненте, тем самым реализуя повторное использование кода на нескольких страницах и упрощая веб-программирование. . Войдите в совершенно новый мир. Эта новая технология — это «Поведение» в DHTML, о котором мы собираемся поговорить.
«Поведение» — это простой и удобный в использовании компонент, инкапсулирующий определенные функции или действия на странице. Когда к элементу на веб-странице прикрепляется «поведение», исходное поведение элемента будет изменено. Таким образом, программисты веб-страниц могут разрабатывать общие инструкции DHTML и изменять некоторые атрибуты исходного объекта, используя «поведение» для улучшения функциональности объекта, а также упрощая HTML-код страницы. Более того, создание и использование «поведений» также очень просто и удобно, а необходимые знания — это только таблицы стилей CSS, инструкции HTML и язык сценариев JAVASCRIPT, которые уже привыкли использовать. Если вы кое-что знаете об этом и имеете реальный опыт программирования, нет проблем с изучением и освоением использования «поведений». В качестве примера мы возьмем компонент «поведение», который изменяет эффект шрифта, чтобы проиллюстрировать, как писать и использовать «поведение», и оценить преимущества и удобство, которые «поведение» привносит при редактировании страниц.
Сначала создайте новый текстовый файл с именем font_efftce.htc. Все файлы, составляющие компонент «поведение», имеют расширения .htc. Содержимое этого файла представляет собой описание этого «поведения». Шаги по его созданию и использованию следующие:
(1) Сначала добавьте несколько ответов на события к этому «поведению». Формат написания оператора следующий:
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue" ()" / >
"EVENT" соответствует необходимым именам событий, вот они: onmouseover, onmouseout, onmousedown, onmouseup. Конечно, вы можете добавить другие имена событий в соответствии с вашими конкретными потребностями. «ONEVENT» соответствует индивидуальному дескриптору события, то есть имени функции, вызываемой при запуске события. Функция Glowit() создает красное свечение вокруг шрифта. Функция noglow() удаляет эффект свечения шрифта. Функция Font2yellow() меняет цвет шрифта на желтый. Функция Font2blue() меняет цвет шрифта на синий. Определения всех четырех событий схожи.
(2) Затем добавьте к этому «поведению» еще два определения «метода», их содержание будет следующим.
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
Параметр "NAME" соответствует данному имени "метода". move_down и move_right — это имена функций, соответствующие «методам» перемещения вниз и вправо соответственно. Обратите внимание: не ставьте скобки «( )» после имени метода, то есть не записывайте его как «move_down()». Это недопустимо в синтаксисе определения «метода».
(3) Следующим шагом является использование операторов сценария JAVASCRIPT для записи содержимого функции, соответствующего «дескриптору события» и «методу», в знакомой среде DHTML для достижения желаемого эффекта. Пожалуйста, обратитесь к исходной программе ниже для конкретного содержания. Параметр «element» относится к объекту, к которому прикреплено это «поведение», поскольку «поведение» всегда привязано к элементу на странице и работает через этот элемент. Все остальные операторы представляют собой программный контент DHTML, поэтому я не буду о них говорить больше. Если у вас есть какие-либо вопросы, вы можете обратиться к документации Microsoft по разработке MSDN для браузера IE, которая содержит подробные справочные материалы по программированию DHTML, инструкции по использованию свойств и методов, а также содержит большое количество статей и примеров программ. Частое посещение документации Microsoft MSDN — полезная привычка, особенно для новичков. Вы можете получить практически любой ответ, который ищете. URL-адрес: http://msdn.microsoft.com/ie/ .
Содержимое полного документа «поведение» «font_effect.htc» выглядит следующим образом:
//////////////////////////////The " начало документа "поведение" // ////////////////////////////////////
//Добавляем четыре события мыши в "поведение" "
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow" ()" / >
< PUBLIC :ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
//Определяем два метода для "поведения"
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME=" move_right" / >
< SCRIPT LANGUAGE="JScript" >
//Определяем переменную для хранения цвета шрифта
var font_color;
//Определяем метод перемещения текста вниз
function move_down()
{
element.style.posTop+=2;
}
// Определите метод перемещения текста вправо
function move_right()
{
element.style.posLeft +=6
}
//Определите вызывающую функцию события onmouseup мыши
function font2blue(){
if (event.srcElement == element)
{
element.style.color='blue';
}
}
//Определяем вызывающую функцию события onmousedown
function Font2yellow(){
if (event.srcElement == element)
{
element.style.color='yellow'
}
;
//Определяем вызывающую функцию события onmouseover
function glewit()
{
if (event.srcElement == element)
{
font_color=style.color;
element.style.color='white
element.style.filter="glow
"(цвет =красный,сила=2)";
}
}
//Определим вызывающую функцию события onmouseout мыши
function noglow()
{
if (event.srcElement==
element)
{
element.style.filter="";
element.style.color=font_color;
}
/ // ///////////////Конец документа "Поведение" /////////////////////////// ////// /
(4) Как использовать «поведение» на странице
Использование компонента «поведение» на странице не требует изучения новых знаний. Требуемые знания — это не что иное, как настройки таблиц стилей CSS и HTML. См. следующие утверждения.
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
Видно, что это отличается от стиля, который мы использовали уже знакомы раньше. Настройки стола точно такие же. Приведенный выше оператор определяет имя стиля: «myfilter», относительно новым содержанием которого для нас является: «behavior:url(font_effect.htc);», «behavior» — это имя нового атрибута «behavior», который как «поведение» настроено в таблице стилей. Содержимое в скобках — это имя файла документа «поведение». В этом примере оно указывает, что документ «поведение» находится в том же каталоге, что и файл подкачки. Если документ «поведение» размещен в другом каталоге, добавьте. «поведение» перед этим параметром. Соответствующие пути, чтобы обеспечить правильное расположение документа «Поведение». Остальное содержимое в этом «стиле» — это обычные настройки атрибутов стиля, которые можно увеличивать или уменьшать в соответствии с вашими потребностями, но в этом примере из-за использования эффекта фильтра «свечение» по крайней мере один атрибут ширины должен быть установлен. Благодаря приведенной выше спецификации стиля у нас есть стиль с именем «myfilter», который имеет «поведение» с эффектом изменения шрифта. Если вы хотите использовать этот стиль с «поведением» в компоненте страницы, это также очень просто. Просто поместите «имя стиля» в область настройки атрибута компонента, см. следующий оператор.
< span id="myspan" class='myfilter' >Текстовый эффект, создаваемый этим поведением
< br >< span class='myfilter' >Свечение после указателя мыши
В этом нет ничего нового Содержимое приведенного выше оператора class='myfilter' — это знакомый нам параметр стиля. Тег «id» также определен в атрибуте первого тега «span». Как вы увидите позже, он установлен для демонстрации вызова «метода» в «поведении». После этой настройки содержимое компонента «span» может отображать заранее определенный эффект в компоненте «поведение»:
1. Когда указатель мыши перемещается над текстовым содержимым, вокруг текста создается эффект красного свечения, и текст становится белым.
2. При нажатии кнопки мыши цвет текста меняется на желтый.
3． Когда кнопка мыши поднята, цвет текста снова меняется на синий.
4. Когда указатель мыши выходит за пределы текстовой области, эффект красного свечения удаляется и текст возвращается к исходному виду.
Кроме того, мы установили два «метода» при определении «поведения»: «move_down» и «move_right». Для вызова этих двух «методов» определены две кнопки:
< button onclick="myspan.move_right();" >Переместить первую строку текста вправо< br >
< button onclick="myspan.move_down ();" >Переместить первую строку текста вниз
Используйте событие onclick кнопки для вызова этих двух "методов". Ранее определенный тег "id" используется в качестве имени объекта компонента, используйте " myspan.move_down», чтобы вызвать «методы» для управления этим объектом. Видно, что после нажатия соответствующей кнопки текст в первой строке сместится вниз или вправо. Хотя для демонстрации используется только первая строка текста, на самом деле вы также можете перемещать другие объекты, если вы сделаете соответствующие настройки. Полное содержимое исходного документа страницы выглядит следующим образом:
< html >
< HEAD >
< TITLE > Демонстрация эффекта поведения
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight :bold; width=180;left:0;}
< BODY >
< span id="myspan" class='myfilter' >Текстовый эффект, создаваемый поведением< br >
< span class=' myfilter' >Светится после указателя мыши< br >
< span class='myfilter' >При этом текст становится белым< br >
< span class='myfilter ' >Текст становится желтым после нажатия мыши < br >
< span class='myfilter' >Текст становится синим после поднятия мыши< br >
< span class='myfilter' >Текст возвращается в исходное состояние после перемещения мыши< br >
< button onclick="myspan.move_right();" >Переместить первую строку текста вправо< br >
< button onclick="myspan.move_down();" >Переместить первую строку текста вниз
Из приведенного выше краткого введения мы видим, что мы можем легко комбинировать несколько эффектов изменения текста в одном «поведении» одновременно и произвольное изменение его с помощью простых настроек «стиля», что связано с компонентами страницы и отражает преимущества и мощные функции компонентов «поведения». Компонент «поведение» можно повторно использовать не только внутри страницы, но и для всех страниц одного и того же сайта. Только представьте, если вы не используете «поведение» для достижения вышеуказанных эффектов, хотя вы можете вызвать на странице набор предопределенных функций для выполнения той же функции, каждый элемент на странице, использующий текстовые эффекты, будет иметь четыре события мыши. Если один и тот же эффект используется на нескольких страницах, вызываемую функцию также необходимо повторно устанавливать на каждой странице. В сравнении очевидно, какой из них лучше, а какой хуже. Таким образом, используя «поведенческие» компоненты, вы можете создавать простые, эффективные, универсальные и удобные в обслуживании страницы. Примеры в этой статье предназначены только для иллюстрации процесса написания и использования «поведенческих» компонентов, чтобы читатели могли иметь общее представление о «поведенческом» программировании и на основе этого создавать нужные им «поведенческие» компоненты. или напрямую цитировать их для удовлетворения своих личных потребностей. Готовые «поведенческие» компоненты, поскольку концепция «совместного использования компонентов» также является первоначальным замыслом «поведенческих» разработчиков. Наконец, я надеюсь, что эта статья послужит цели «вдохновить других» и позволит читателям войти в чудесный мир веб-программирования DHTML.