La aplicación de cuadros de diálogo

En el artículo anterior insinuado, puede utilizar un elemento div como un bloque de contenido que imita el comportamiento de un cuadro de diálogo. Este artículo analiza más específicamente a la aplicación eficaz de los cuadros de diálogo en las modernas aplicaciones Web. Problema que desea aplicar de forma efectiva los cuadros de diálogo en aplicaciones Web. Teoría El título de este artículo muestra las palabras "los cuadros de diálogo" entre comillas, porque el elemento no es un div cuadro de diálogo verdadero. En cambio, se limita a las fronteras de la página HTML. Normalmente, usted puede colocar los cuadros de diálogo real en cualquier lugar de la pantalla del ordenador. Real cuadros de diálogo no son de interés en este artículo. Lo que interesa es cómo crear un cuadro de diálogo "HTML". Por ejemplo, al escribir las páginas HTML, puede utilizar los cuadros de diálogo para un montón de cosas, tales como

• Proporcionar a la meta información asociada a un punto de acceso en una página HTML

• Para solicitar información adicional al rellenar un formulario o procesamiento de un flujo de trabajo

• Menús

• Comportarse como un icono de esperar También puede utilizar ventanas emergentes para indicar fallos; ventanas emergentes parecen diferentes de los cuadros de diálogo, pero la técnica utilizada para su elaboración es idéntico. Solución dos cosas deben pasar para que un elemento div se comporta como un cuadro de diálogo. En primer lugar, usted debe colocar el elemento div de la página HTML utilizando coordenadas absolutas. En segundo lugar, es necesario hacer que el elemento div consciente de movimiento del ratón. El siguiente ejemplo pone dos elementos div 100 píxeles desde la izquierda y 100 píxeles desde la parte superior de la ventana del navegador del cliente.

 Fuente: / web / ROOT / artículos AJAX / DHTML / divdialogessentials.html  Esenciales DIV diálogo  Empezar  hola 
 Final

El ejemplo de código HTML contiene dos elementos div, uno anidado dentro del otro. Ignorar el atributo de clase, ya que se utiliza el color de los elementos div. En cambio, mirar de cerca el atributo de estilo, que tiene tres propiedades: la izquierda, arriba, y la posición. La propiedad posición y el valor absoluto indican que la posición del elemento utiliza coordenadas absolutas. Las coordenadas absolutas de la izquierda esquina superior están dadas por las principales propiedades e izquierda, respectivamente. La anchura y la altura, que indican el ancho y alto el elemento div se están desaparecidos. Cuando estas propiedades se pierden, el navegador calcula dinámicamente el ancho y altura. En el ejemplo de código HTML, un elemento div se encapsula dentro del otro. Tanto de los elementos div se colocan 100 píxeles desde la parte superior y 100 píxeles desde la izquierda. A primera vista, las coordenadas absolutas que indican que ambos elementos div se encuentran en el mismo lugar. Sin embargo, esto no es lo que el navegador muestra.

Los dos elementos div no están en uno encima del otro, sino más bien es relativa a la otra. Eso es un poco desconcertante, la posición de atributo se establece en absoluto, por lo que las coordenadas debe ser absoluto. La verdadera pregunta es "¿Qué es absoluto?" Por ejemplo, ¿es necesario para calcular todas las coordenadas absolutas con respecto al elemento padre? Imagínese si un elemento div que no se coloca usando las coordenadas absolutas contiene un elemento div que es posición utilizando coordenadas absolutas. Que se coordina la utilización confinada elemento div? La respuesta es que se utilice el último elemento que sea colocado: absolute o position: relative (posición: heredar es el predeterminado). Esta es la manera de obtener la posición absoluta dentro de la posición relativa. Utilizando las coordenadas que permite tener un elemento div aparecer y mostrar su información como un cuadro de diálogo. Se podría añadir la funcionalidad en un vínculo en el cuadro de diálogo "que oculta el cuadro de diálogo emergente. Para poder saber dónde hacer un cuadro de diálogo aparece, es necesario captar el mensaje de onclick y procesarla. El siguiente código hace que aparezca un elemento div donde los usuarios hacen clic en la pantalla. El elemento div contiene un vínculo que se utiliza para ocultar el elemento div.

 Fuente: / web / ROOT / artículos AJAX / DHTML / clickappeardiv.html  Esenciales DIV diálogo  Hola algún texto Escóndeme

En la página de ejemplo el HTML, el cuerpo es un elemento div único, que no se muestra cuando se carga la página HTML. El elemento div es el único elemento div que se pondrán en algún lugar de la página HTML cuando el ratón se hace clic. Notificación de la anchura, altura y posición de las propiedades se asignan en la declaración del elemento div. Estas propiedades son por defecto que puede establecer en tiempo de diseño, reduciendo así la cantidad de código necesario para definir la hora de mostrar el elemento div.

El ejemplo de código contiene dos funciones: DisplayDiv y hideDiv. La función DisplayDiv se utiliza para mostrar el elemento div. La función hideDiv se utiliza para ocultar el elemento div. El controlador de body.onclick llama a la función DisplayDiv. El elemento del cuerpo se usa porque las burbujas evento onclick al alza de hijo a padre, y el elemento div se debe colocar en algún lugar de la página html. La función se llama hideDiv haciendo clic en el enlace que se muestra cuando se visualiza el elemento div. Cuando se carga la página HTML, los usuarios se les presenta una pantalla en blanco. Al hacer clic en cualquier lugar de la pantalla, el elemento del cuerpo captura el evento de clic y pasa el caso a la función de DisplayDiv. En la aplicación de DisplayDiv, la EVT objeto de evento es la prueba utilizando una sola línea. La única línea es necesaria para cruzar la compatibilidad del navegador. Una vez que el objeto de evento complete se ha recuperado y asignado a EVT, se supone que un evento de ratón está siendo enviado. Un explorador enviado evento de ratón tiene las propiedades y clientX clientY, que contienen las coordenadas de un clic en el contexto de la página HTML.

Las coordenadas de la posición del elemento div utilizando las propiedades y style.left style.top. Después de que el elemento div se ha colocado, se muestra usando la style.display propiedad. Usted puede ocultar el elemento div haciendo clic en el vínculo Ocultar mí, que a continuación, los resultados en una página HTML en blanco. El mostrar y ocultar el elemento div es bastante elemental, pero hay un gotcha ocultos. Si un elemento div utiliza coordenadas absolutas y está encapsulado dentro de otro elemento div que utiliza coordenadas absolutas, a continuación, establecer las coordenadas se traducirá en un elemento en una posición incorrecta. Esto sucede porque los usos, haga clic en caso de coordenadas en relación con el navegador, y el encapsulado utiliza el elemento div coordenadas relativas al elemento padre. Para solucionar este problema, es necesario hacer referencia a diferentes propiedades, como las siguientes reescrito función DisplayDiv ilustra:

función DisplayDiv (evt) (evt = (evt)? evt: ((event)? evento: null); if (evt.layerX) ( x = evt.layerX; y = evt.layerY; ) else if (evt.offsetX) ( x = evt.offsetX; y = evt.offsetY; )var element = document.getElementById ( "display"); element.style.left = x; element.style.top = y; element.style.display = "block";)

El código en negrita representa el código utilizado para encontrar las coordenadas del evento, haga clic en relación con el elemento que se ha hecho clic. El código consta de dos pruebas de la existencia de cualquiera de layerX o offsetX. Si layerX existe, entonces usted está utilizando aMozilla navegador compatible, y si offsetX existe, entonces usted está utilizando Microsoft Internet Explorer. Este código modificado se trabajo en situaciones sencillas, pero no es fiable, ya que las coordenadas son relativas a la elemento que se ha hecho clic. Por ejemplo, si usted tiene un elemento div encapsulado dentro de un elemento div encapsulado dentro de un elemento div, y hacer clic en el elemento div medio, las coordenadas relativas se equivocan. En pocas palabras, una vez que se empieza a utilizar coordenadas absolutas dentro de los elementos que se posición mediante coordenadas absolutas, vas a tener problemas de averiguar la posición real. En su lugar, utilice clientX y clientY, y calcular la coordenadas absolutas de los elementos HTML mediante una iteración recursiva. La capacidad de mostrar elementos div donde los usuarios hacen clic le permite implementar la funcionalidad de menú tipo. Puede implementar controladores de pantalla de error y otros mensajes informativos que deben ser colocados. Lo único que no podemos hacer es mostrar amessage o funcionalidad que se puede arrastrar a otra posición en la página HTML. Para ello, la solución más sencilla es aplicar el ratón hacia abajo, mueva el ratón y el ratón-up los acontecimientos. Esto suena simple, pero requiere un poco de trabajo extra para hacerlo con firmeza.

Para empezar, no se puede utilizar el evento onclick, ya que este evento se envía cuando se suelta el botón del ratón. Para llevar a cabo una operación de arrastrar, debe capturar el onmousedown, onmouseout, y eventos onmouseup. El resto de este artículo se utiliza una solución precanned, porque se trata de muy pocos detalles, y se puede aplicar esta solución base en múltiples contextos. La solución es utilizar un archivo desde el sitio AWeb llamado Dynamic Drive (o, Dom-drag.js ) 4, que sólo requiere que los usuarios especificar qué elemento HTML deben arrastrarse. El Dom-drag.js aplicación maneja todo el nivel inferior del ratón haga clic en Detalles del evento. La barra de herramientas es reconocido como un punto de acceso utilizado para arrastrar el elemento div toda la página HTML. No es necesario definir un elemento div usando la notación tradicional cuadro de diálogo. El código HTML siguiente, se muestra cómo se puede definir un elemento div como un punto de acceso:

 Arrastre DIV  Drag Me 
 vínculo contenido

Observe el código del diseño y la cantidad de código de script existe. El código de diseño supera el código de secuencia de comandos, que es lo más probable es que suceda en sus implementaciones de cuadro de diálogo. Con el Dom-drag.js solución, el enfoque principal es sobre el valor añadido en términos de apariencia. El Dom-drag.js solución no requieren el uso de un elemento div, ya que podría haber creado un elemento de la tabla que pueden arrastrarse. Recuerde lo siguiente en la aplicación de cuadros de diálogo:

• Implementar un cuadro de diálogo en HTML, utilice las coordenadas absolutas, las propiedades de la parte superior, izquierda, y la pantalla, y onclick o onmousedown, onmouseout, y los eventos de ratón onmouseup.

• Cuando la aplicación de cuadros de diálogo, que va a encontrarse con dos problemas importantes: la adquisición del derecho de coordenadas, y asegurarse de que el elemento que desencadena el evento tiene alguna relación con el elemento que va a ser manipulado. Por ejemplo, usted no quiere un menú que aparece en la esquina superior derecha la mano cuando la parte inferior izquierda esquina se hace clic. Este comportamiento se puede confundir a los usuarios.

• arrastre delegado siempre-y-soltar funcionalidad a otra biblioteca. En este artículo se utiliza el DOM-drag.js solución, pero un montón de otras soluciones abundan, y que se recomienda probarlos.

un artículo presentado por Sonja Lande

Descargo de responsabilidad:Nuestro sitio web no es responsable por el contenido de este artículo. Webarticles es un recurso de información gratuito.
Importante: En este artículo "Implementación de cuadros de diálogo", fue traducida por un software automático. Sentimos pena por los errores de ortografía que pueda haber ocurrido. Gracias por su comprensión.