Antes del lanzamiento del navegador IE 5.0 de Microsoft, el mayor desafío que enfrentaba la programación web era que los componentes no se podían crear fácilmente para lograr la reutilización del código y el intercambio de varias páginas. Este problema siempre ha preocupado a los programadores de páginas web DHTML (HEML dinámico). Solo pueden seguir reescribiendo códigos HTML, CSS y JAVASCRIPT para cumplir funciones repetidas o similares en varias páginas. Desde el lanzamiento del navegador IE 5.0, esta situación ha mejorado y nos ha traído un nuevo método de combinación de instrucciones, que puede encapsular el código que implementa funciones específicas en un componente, logrando así la reutilización del código en varias páginas y facilitando la programación web. Entra en un mundo completamente nuevo. Esta nueva tecnología son los "Comportamientos" en DHTML de los que vamos a hablar.
"Comportamiento" es un componente simple y fácil de usar que encapsula funciones o acciones específicas en la página. Cuando se adjunta un "comportamiento" a un elemento en una página WEB, se cambiará el comportamiento original del elemento. Por lo tanto, los programadores de páginas web pueden desarrollar instrucciones DHTML generales y cambiar algunos atributos del objeto original, utilizando "comportamiento" para mejorar la funcionalidad de un objeto y al mismo tiempo simplificar el código HTML de la página. Además, la creación y el uso de "comportamientos" también es muy simple y conveniente, y el conocimiento requerido son solo las hojas de estilo CSS, las instrucciones HTML y el lenguaje de secuencias de comandos JAVASCRIPT que ya está acostumbrado a usar. Siempre que sepa algo al respecto y tenga experiencia real en programación, no hay problema en aprender y dominar el uso de "comportamientos". Tomaremos un componente de "comportamiento" que cambia el efecto de fuente como ejemplo para ilustrar cómo escribir y usar un "comportamiento" y experimentar las ventajas y conveniencias que el "comportamiento" brinda a la edición de páginas.
Primero, cree un nuevo archivo de texto llamado font_efftce.htc. Todos los archivos que componen el componente "comportamiento" tienen extensiones .htc. El contenido de este archivo es nuestra descripción de este "comportamiento". Los pasos para crearlo y usarlo son los siguientes:
(1) Primero agregue varias respuestas de eventos a este "comportamiento". El formato de escritura de la declaración es el siguiente:
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVEENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVEENT="font2amarillo()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVEENT="font2blue ()" />
"EVENTO" corresponde a los nombres de eventos requeridos, aquí están: onmouseover, onmouseout, onmousedown, onmouseup. Por supuesto, puede agregar otros nombres de eventos para satisfacer sus necesidades específicas. "ONEVENT" corresponde al identificador de evento individual, es decir, el nombre de la función llamada cuando se activa el evento. La función Glowit() crea un brillo rojo alrededor de la fuente. La función noglow() elimina el efecto de brillo de la fuente. La función Font2Yellow() cambia el color de la fuente a amarillo. La función Font2blue() cambia el color de la fuente a azul. Las definiciones de los cuatro eventos son similares.
(2) A continuación, agregue dos definiciones más de "método" a este "comportamiento", el contenido es el siguiente.
< PUBLIC:METHOD NAME="move_down" />
< PUBLIC:METHOD NAME="move_right" />
El parámetro "NOMBRE" corresponde al nombre del "método" dado. move_down y move_right son los nombres de funciones correspondientes a los "métodos" de moverse hacia abajo y hacia la derecha respectivamente. Tenga en cuenta que no coloque corchetes "( )" después del nombre del método, es decir, no lo escriba como "move_down()". Esto no está permitido en la sintaxis de la definición de "método".
(3) El siguiente paso es utilizar declaraciones de script JAVASCRIPT para escribir el contenido de la función correspondiente al "identificador de evento" y al "método" en el entorno DHTML familiar para lograr el efecto deseado. Consulte el programa fuente a continuación para obtener contenido específico. El parámetro "elemento" se refiere al objeto al que se adjunta este "comportamiento", porque el "comportamiento" siempre se adjunta a un elemento en la página y funciona a través de este elemento. Las otras declaraciones son todas contenido de programación DHTML, por lo que no diré más sobre ellas. Si tiene alguna pregunta, puede consultar la documentación de desarrollo MSDN de Microsoft para el navegador IE, que contiene contenido detallado de referencia de programación DHTML, instrucciones para usar propiedades y métodos, y una gran cantidad de artículos y programas de ejemplo. Visitar con frecuencia la documentación de MSDN de Microsoft es un buen hábito de aprendizaje, especialmente para principiantes. Puede obtener casi cualquier respuesta que busque. Su URL es: http://msdn.microsoft.com/ie/ .
El contenido del documento completo de "comportamiento" "font_effect.htc" es el siguiente:
//////////////////////////////El " El documento "comportamiento" comienza // ///////////////////////////////////
//Agrega cuatro eventos del mouse a "comportamiento". "
<PUBLIC:ATTACH EVENT= "onmouseover" ONEVEENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVEENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVEENT="font2blue ()" />
< PUBLIC :ATTACH EVENT="onmouseup" ONEVEENT="font2blue()" / >
//Defina dos métodos para "comportamiento"
< PUBLIC:METHOD NAME="move_down" />
< PUBLIC:METHOD NAME=" move_right" / >
< SCRIPT LANGUAGE="JScript" >
//Definir una variable para almacenar el color de fuente
var font_color;
//Definir un método para mover el texto hacia abajo
function move_down()
{
element.style.posTop+=2;
}
// Defina un método para mover texto a la derecha
function move_right()
{
element.style.posLeft +=6
}
//Defina la función de llamada del evento onmouseup del mouse
function font2blue(){
if (event.srcElement == elemento)
{
element.style.color='blue';
}
}
// Definir la función de llamada de la
función de evento onmousedown font2amarillo(){
if (event.srcElement == elemento)
{
element.style.color
='amarillo'
;
// Definir la función de llamada de la
función de evento onmouseover Glowit()
{
if (event.srcElement == elemento)
{
font_color=style.color
element.style.color
='white';
(color =rojo,fuerza=2)";
}
}
//Definir la función de llamada del evento onmouseout del mouse
function noglow()
{
if (event.srcElement == elemento)
{
element.style.filter
=
"
";
element.style.color=font_color
;
// ////////////////Fin del documento "Comportamiento" /////////////////////////// ////// /
(4) Cómo utilizar el "comportamiento" en una página
El uso del componente "comportamiento" en una página no requiere aprender nuevos conocimientos. El conocimiento requerido no es más que la configuración de hojas de estilo CSS y HTML. Consulte las siguientes declaraciones.
< ESTILO >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
Se puede ver que este es diferente del estilo que Ya estoy familiarizado con antes. La configuración de la mesa es exactamente la misma. La declaración anterior define un nombre de estilo: "myfilter", cuyo contenido relativamente nuevo para nosotros es: "behavior:url(font_effect.htc);", "behavior" es el nombre del nuevo atributo "behavior", que es cómo se configura el "comportamiento" en la hoja de estilo. El contenido entre paréntesis es el nombre del archivo del documento de "comportamiento". En este ejemplo, indica que el documento de "comportamiento" está en el mismo directorio que el archivo de página. Si el documento de "comportamiento" se coloca en otro directorio, agregue. "comportamiento" delante de este parámetro. Los nombres de ruta correspondientes para garantizar que el documento de comportamiento se pueda ubicar correctamente. El resto del contenido en este "estilo" son solo configuraciones de atributos de estilo normales, que se pueden aumentar o disminuir según sus necesidades, pero en este ejemplo, debido al uso del efecto de filtro "resplandor", al menos un atributo de ancho debe configurarse. A través de la especificación de estilo anterior, tenemos un estilo llamado: "myfilter", que viene con un "comportamiento" con un efecto de cambio de fuente. Si desea utilizar este estilo con "comportamiento" en un componente de página, también es muy simple: simplemente coloque el "nombre de estilo" en el área de configuración de atributos del componente, consulte la siguiente declaración.
< span id="myspan" class='myfilter' >El efecto de texto producido por el comportamiento</span >< br >
< span class='myfilter' >Brillo después del puntero del mouse</span>
No hay nada nuevo en el Contenido de la declaración anterior, class='myfilter' es la configuración de estilo con la que estamos familiarizados. También se define una etiqueta "id" en el atributo de la primera etiqueta "span". Como verá más adelante, esto está configurado para demostrar cómo llamar al "método" dentro del "comportamiento". Después de esta configuración, el contenido del componente "span" puede mostrar el efecto predeterminado en el componente "behavior":
1. Cuando el puntero del mouse se mueve sobre el contenido del texto, se produce un efecto de brillo rojo alrededor del texto y el texto se vuelve blanco.
2. Cuando se presiona el botón del mouse, el color del texto cambia a amarillo.
3． Cuando se levanta el botón del mouse, el color del texto vuelve a ser azul.
4. Cuando el puntero del mouse se mueve fuera del área de texto, el efecto de brillo rojo se elimina y el texto vuelve a su apariencia original.
Además, configuramos dos "métodos" al definir "comportamiento", "move_down" y "move_right". Para llamar a estos dos "métodos", se definen dos botones:
< botón onclick="myspan.move_right();" >Mover la primera línea de texto a la derecha</botón >< br >
< botón onclick="myspan.move_down ();" >Mover la primera línea de texto hacia abajo</button>
Utilice el evento onclick del botón para llamar a estos dos "métodos". La etiqueta "id" previamente definida se utiliza como nombre de objeto del componente, utilice " myspan.move_down" para llamar a "métodos" para manipular este objeto. Se puede ver que después de presionar el botón correspondiente, el texto de la primera línea se moverá hacia abajo o hacia la derecha. Aunque solo se utiliza la primera línea de texto para la demostración, de hecho, también puede mover otros objetos siempre que realice los ajustes correspondientes. El contenido completo del documento fuente de la página es el siguiente:
< html >
< HEAD >
< TITLE > Demostración del efecto de comportamiento < /TITLE >
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight :bold; width=180;left:0;}
< /STYLE >
< /HEAD >
< BODY >
< span id="myspan" class='myfilter' >El efecto de texto producido por el comportamiento</span >< br >
< abarcan clase='myfilter' >Se ilumina después del puntero del mouse</span >< br >
< abarcan class='myfilter' >Al mismo tiempo, el texto se vuelve blanco< /span >< br >
< abarcan class='myfilter ' >El texto se vuelve amarillo después de presionar el mouse </ /span >< br >
< span class='myfilter' >El texto se vuelve azul después de que se levanta el mouse</ /span >< br >
< span class='myfilter' >El texto vuelve a su estado original después de alejar el mouse</span >< br >
< button onclick="myspan.move_right();" >Mover la primera línea de texto hacia la derecha</ /button >< br >
< button onclick="myspan.move_down();" >Mover la primera línea de texto hacia abajo</ /button >
</ /BODY >
</ /html >
A través de la breve introducción anterior, podemos ver que podemos combinar fácilmente múltiples efectos de cambio de texto en un "comportamiento" al mismo tiempo, y cámbielo arbitrariamente mediante configuraciones simples de "estilo" Relacionado con los componentes de la página, refleja las ventajas y poderosas funciones de los componentes de "comportamiento". Un componente de "comportamiento" se puede reutilizar no sólo dentro de una página, sino también para todas las páginas del mismo sitio. Imagínese, si no usa "comportamiento" para lograr los efectos anteriores, aunque puede llamar a un conjunto de funciones predeterminadas en la página para completar la misma función, cada elemento de la página que usa efectos de texto tendrá cuatro eventos de mouse. adjunto Si se utiliza el mismo efecto en varias páginas, la función llamada también debe configurarse repetidamente en cada página. En comparación, es obvio cuál es mejor y cuál es peor. Por lo tanto, utilizando componentes de "comportamiento", puede crear páginas simples, eficientes, versátiles y fáciles de mantener. Los ejemplos de este artículo son sólo para ilustrar el proceso de escritura y uso de los componentes de "comportamiento", para que los lectores puedan tener una comprensión general de la programación de "comportamiento" y, en base a esto, puedan crear los componentes de "comportamiento" que necesitan. o cítelos directamente para satisfacer sus necesidades personales. Componentes "conductuales" ya preparados, porque el concepto de "compartir componentes" es también la intención original de los desarrolladores "conductuales". Finalmente, espero que este artículo pueda servir para "inspirar a otros" y permitir a los lectores ingresar al maravilloso mundo de la programación web DHTML.