Antes do lançamento do navegador IE 5.0 da Microsoft, o maior desafio enfrentado na programação web era que os componentes não podiam ser criados facilmente para conseguir a reutilização de código e o compartilhamento de várias páginas. Esse problema sempre incomodou os programadores de páginas da web DHTML (HEML dinâmico). Eles só podem continuar reescrevendo códigos HTML, CSS e JAVASCRIPT para atender funções repetidas ou semelhantes em múltiplas páginas. Desde o lançamento do navegador IE 5.0, esta situação foi melhorada. Ele nos trouxe um novo método de combinação de instruções, que pode encapsular o código que implementa funções específicas em um componente, realizando assim a reutilização do código em múltiplas páginas e facilitando a programação web. Entre em um mundo totalmente novo. Esta nova tecnologia são os “Comportamentos” em DHTML sobre os quais falaremos.
“Comportamento” é um componente simples e fácil de usar que encapsula funções ou ações específicas na página. Quando um “comportamento” é anexado a um elemento em uma página WEB, o comportamento original do elemento será alterado. Portanto, os programadores de páginas web podem desenvolver instruções DHTML gerais e alterar alguns atributos do objeto original, usando "comportamento" para melhorar a funcionalidade de um objeto, ao mesmo tempo que simplificam o código HTML da página. Além disso, a criação e utilização de “comportamentos” também é muito simples e conveniente, e o conhecimento necessário são apenas as folhas de estilo CSS, instruções HTML e linguagem de script JAVASCRIPT que já estamos acostumados a usar. Contanto que você saiba algo sobre isso e tenha experiência real em programação, não há problema em aprender e dominar o uso de "comportamentos". Tomaremos um componente "comportamento" que altera o efeito da fonte como exemplo para ilustrar como escrever e usar um "comportamento" e experimentar as vantagens e conveniência que o "comportamento" traz para a edição de páginas.
Primeiro, crie um novo arquivo de texto chamado font_efftce.htc. Todos os arquivos que compõem o componente "comportamento" possuem extensões .htc. As etapas para criá-lo e usá-lo são as seguintes:
(1) Primeiro adicione várias respostas de eventos a este "comportamento". O formato de escrita da instrução é o seguinte:
< 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" corresponde aos nomes de eventos necessários, aqui estão eles: onmouseover, onmouseout, onmousedown, onmouseup. Claro, você pode adicionar outros nomes de eventos para atender às suas necessidades específicas. "ONEVENT" corresponde ao identificador do evento individual, ou seja, o nome da função chamada quando o evento é acionado. A função glowit() cria um brilho vermelho ao redor da fonte. A função noglow() remove o efeito de brilho da fonte. A função Font2yellow() altera a cor da fonte para amarelo. A função Font2blue() altera a cor da fonte para azul. As definições de todos os quatro eventos são semelhantes.
(2) Em seguida, adicione mais duas definições de “método” a este “comportamento”, o conteúdo é o seguinte.
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
O parâmetro "NAME" corresponde ao nome do "método" fornecido. move_down e move_right são os nomes das funções correspondentes aos "métodos" de mover para baixo e para a direita, respectivamente. Observe que não coloque colchetes "( )" após o nome do método, ou seja, não escreva como "move_down()". Isso não é permitido na sintaxe de definição do "método".
(3) A próxima etapa é usar instruções de script JAVASCRIPT para escrever o conteúdo da função correspondente ao "manipulador de evento" e "método" no ambiente DHTML familiar para obter o efeito desejado. Consulte o programa fonte abaixo para conteúdo específico. O parâmetro "elemento" refere-se ao objeto ao qual esse "comportamento" está anexado, pois o "comportamento" está sempre anexado a um elemento da página e funciona por meio desse elemento. As outras declarações são todas conteúdo de programação DHTML, então não vou falar mais sobre elas. Se você tiver alguma dúvida, consulte a documentação de desenvolvimento do MSDN da Microsoft para o navegador IE, que contém conteúdo detalhado de referência de programação DHTML, instruções para usar propriedades e métodos e contém um grande número de artigos e programas de exemplo. Visitar frequentemente a documentação do MSDN da Microsoft é um bom hábito de aprendizado, especialmente para iniciantes. Você pode obter quase qualquer resposta que procura. Seu URL é: http://msdn.microsoft.com/ie/ .
O conteúdo do documento completo de "comportamento" "font_effect.htc" é o seguinte:
////////////////////////////O " behavior" documento começa // /////////////////////////////////
//Adicionar quatro eventos de mouse a "behavior "
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow ()" / >
< PUBLIC :ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
//Defina dois métodos para "comportamento"
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME=" move_right" / >
< SCRIPT LANGUAGE="JScript" >
//Defina uma variável para armazenar a cor da fonte
var font_color;
//Defina um método para mover o texto para baixo
function move_down()
{
element.style.posTop+=2;
}
// Defina um método para mover o texto para a direita
function move_right()
{
element.style.posLeft +=6
}
//Defina a função de chamada do evento onmouseup do mouse
function font2blue(){
if (event.srcElement == element)
{
element.style.color='blue';
//
Defina
a função de chamada do evento onmousedown do mouse
function font2yellow(){
if
(event.srcElement == element)
{
element.style.color='yellow'
;
//Defina a função de chamada do evento onmouseover do mouse
function glowit()
{
if (event.srcElement == element)
{
font_color=style.color;
element.style.color
='white';
(cor =vermelho, força = 2)";
}
}
//Defina a função de chamada do evento onmouseout do mouse
function noglow()
{
if(
event.srcElement==
element)
{
element.style.filter
="";
element.style.color=font_color
;
// ////////////////Fim do documento "Comportamento" ///////////////////////// ////// /
(4) Como usar “comportamento” em uma página
Usar o componente “comportamento” em uma página não requer o aprendizado de novos conhecimentos. O conhecimento necessário nada mais é do que as configurações de folhas de estilo CSS e HTML. Consulte as instruções a seguir.
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
Pode-se ver que isso é diferente do estilo que usamos já estamos familiarizados antes As configurações da tabela são exatamente as mesmas. A declaração acima define um nome de estilo: "myfilter", cujo conteúdo relativamente novo para nós é: "behavior:url(font_effect.htc);", "behavior" é o nome do novo atributo "behavior", que é como o "comportamento" é configurado na folha de estilos. O conteúdo entre colchetes é o nome do arquivo do documento "comportamento". Neste exemplo, indica que o documento "comportamento" está no mesmo diretório do arquivo de página. Se o documento "comportamento" for colocado em outro diretório, adicione. "comportamento" na frente deste parâmetro Nomes de caminho correspondentes para garantir que o documento Comportamento possa ser localizado corretamente. O restante do conteúdo deste "estilo" são apenas configurações normais de atributos de estilo, que podem ser aumentados ou diminuídos de acordo com suas necessidades, mas neste exemplo, devido ao uso do efeito de filtro "brilho", pelo menos um atributo de largura deve ser definido. Através da especificação de estilo acima, temos um estilo chamado: "myfilter", que vem com um "comportamento" com efeito de mudança de fonte. Se você quiser usar este estilo com "comportamento" em um componente de página, também é muito simples, basta colocar o "nome do estilo" na área de configuração de atributos do componente, veja a instrução a seguir.
< span id="myspan" class='myfilter' >O efeito de texto produzido pelo comportamento
< br >< span class='myfilter' >Brilho após o ponteiro do mouse
Não há nada de novo no declaração acima Content, class='myfilter' é a configuração de estilo com a qual estamos familiarizados. Uma tag "id" também é definida no atributo da primeira tag "span". Como você verá mais tarde, ela é definida para demonstrar a chamada do "método" dentro do "comportamento". Após esta configuração, o conteúdo do componente “span” pode exibir o efeito pré-determinado no componente “comportamento”:
1. Quando o ponteiro do mouse se move sobre o conteúdo do texto, um efeito de brilho vermelho é produzido ao redor do texto e o texto fica branco.
2. Quando o botão do mouse é pressionado, a cor do texto muda para amarelo.
3. Quando o botão do mouse é levantado, a cor do texto volta para azul.
4. Quando o ponteiro do mouse se move para fora da área de texto, o efeito de brilho vermelho é removido e o texto retorna à sua aparência original.
Além disso, definimos dois "métodos" ao definir "comportamento", "move_down" e "move_right". Para chamar esses dois "métodos", são definidos dois botões:
< button onclick="myspan.move_right();" >Mover a primeira linha do texto para a direita< br >
< button onclick="myspan.move_down ();" >Mover a primeira linha do texto para baixo
Use o evento onclick do botão para chamar esses dois "métodos". A tag "id" definida anteriormente é usada como nome do objeto do componente, use " myspan.move_down" para chamar "métodos" para manipular este objeto. Percebe-se que após pressionar o botão correspondente, o texto da primeira linha se moverá para baixo ou para a direita. Embora apenas a primeira linha do texto seja usada para demonstração, na verdade, você também pode mover outros objetos, desde que faça as configurações correspondentes. O conteúdo completo do documento fonte da página é o seguinte:
< html >
< HEAD >
< TITLE > Demonstração de efeito de comportamento < /TITLE >
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight :bold; width=180;left:0;}
< /STYLE >
< BODY >
< span id="myspan" class='myfilter' >O efeito de texto produzido pelo comportamento< br >
< span class='myfilter' >Brilha após o ponteiro do mouse< br >
< span class='myfilter' >Ao mesmo tempo, o texto fica branco< br >
< span class='myfilter' ' >O texto fica amarelo depois que o mouse é pressionado < br >
< span class='myfilter' >O texto fica azul depois que o mouse é levantado< br >
< span class='myfilter' >O texto retorna ao seu estado original depois que o mouse é afastado< br >
< button onclick="myspan.move_right();" >Mover a primeira linha do texto para a direita< br >
< button onclick="myspan.move_down();" >Mover a primeira linha do texto para baixo
Através da breve introdução acima, podemos ver que podemos combinar facilmente vários efeitos de alteração de texto em um "comportamento" ao mesmo tempo e alterá-lo arbitrariamente por meio de configurações simples de "estilo" Relacionado aos componentes da página, reflete as vantagens e funções poderosas dos componentes de "comportamento". Um componente de “comportamento” pode ser reutilizado não apenas dentro de uma página, mas também para todas as páginas do mesmo site. Imagine só, se você não usar "comportamento" para obter os efeitos acima, embora possa chamar um conjunto de funções predeterminadas na página para completar a mesma função, cada elemento da página que usa efeitos de texto terá quatro eventos de mouse anexado Se o mesmo efeito for usado em várias páginas, a função chamada também precisará ser definida repetidamente em cada página. Em comparação, é óbvio qual é melhor e qual é pior. Portanto, utilizando componentes de “comportamento”, você pode criar páginas simples, eficientes, versáteis e de fácil manutenção. Os exemplos neste artigo são apenas para ilustrar o processo de escrita e uso de componentes de "comportamento", para que os leitores possam ter uma compreensão geral da programação de "comportamento" e, com base nisso, possam criar os componentes de "comportamento" de que precisam, ou citá-los diretamente para atender às suas necessidades pessoais Componentes "comportamentais" prontos, porque o conceito de "compartilhamento de componentes" também é a intenção original dos desenvolvedores "comportamentais". Finalmente, espero que este artigo possa servir ao propósito de "inspirar outras pessoas" e permitir que os leitores entrem no maravilhoso mundo da programação web DHTML.