Jueves, 04 de diciembre 2008
No hay comentarios

jQuery: Una ventana de confirmación

Seguimos siendo el tema de jQuery usos prácticos. Hoy tenía que escribir una ventana de confirmación de una operación en el panel de administración. El caso parece ser simple y puede ser resuelto por el tema, olvidándose de JavaScript (Confirmar) o PHP, pero la diversión está en cómo hacer esto para no provocar, e incluso que fue un resultado muy decente?
Voy a tratar de presentar una solución al problema de la muestra, en el supuesto de que el elemento que queremos es acompañado por la confirmación por parte del usuario, es un enlace.

Primero Archivo HTML de ejemplo

Empezamos con un archivo en el que llevamos a cabo nuestras pruebas viles: 

  <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 confirmación de <title> de diálogo </ title>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur elite nisi nec.  Quisque ultrices Orci nisl quis.  Aliquam en el dolor.  Sed quam consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ante dictum ac aliquet.  Sapien etiam nulo, eget consequat, consequat vitae, molestie Identificación, Lectus.  En HAC habitasse dictumst platea.  Aliquam feugiat odio ac Lectus.  Suspendisse egestas nisl varius.  Morbi nulo.  Pellentesque aliquet interdum felis.  Vestibulum libero luctus euismod.  Suspendisse Sodales interdum Enimem.  Pellentesque Orcia.  Nulla Massa nunc, eleifend aka, eleifend varius, Cong eget, leo.  Vestibulum ante ipsum primis en faucibus Orci et ultrices posuere luctus cubilia Curae <br/>
 Aliquet Cras, quis lígula accumsan rutrum, lorem lorem velita dignissim, fermentum dignissim quam lígula en la lígula.  Nulla purus dictum interdum.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem, sempre aliquet, tempus de corriente alterna, rutrum gesta, líbero.  Etiam neque odio, blandit NEC, también conocido como suscipit, Pellentesque scelerisque, leo.  En Metus Identificación.  Vivamus rutrum.  Nulla NEC velita.  Nisi ut purus, en Porta, tincidunt sit amet, pulvinar scelerisque, sem.  Sed Risus nisi nec.  En nisi.  Augustin et al.  Phasellus ullamcorper quis tempus urna dapibus Lacus.  Est Sed eget  Etiam tellus erat, nisi nec NEC, sed placerat, ultricies un Orci,.  Cras ac Lectus.  Curabitur NEC lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> Mecenas </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 </ Body>
 </ HTML>

Muestra el texto generador de Lorem ipsum , fue dentro de una p. Poco antes de que el cuerpo de la etiqueta de cierre, puesto que el div # confirmar, dentro del cual habrá un código de la ventana para confirmar.

Segundo La capa de presentación

Centrémonos en nuestra ventana. En mi caso, el código html que será responsable de toda la ventana, se verá como sigue: 

  <div id="confirm">
 <div
 <div
 <h1> ¿Seguro que desea eliminar este elemento? </ h1>
 <p> <button onClick="location.href='TUTAJ llegará a los contenidos de la HREF LINKU'"> SI </ button> <button> NO </ button> </ p>
 </ Div> <! - Final # confirman div ->
 </ Div> <! - Final # confirman div ->
 </ Div> <! - Final # Confirmar ->

El código dentro de la confirmación #, es generado por JavaScript. Pero vale la pena considerar por qué se ve así como así y por qué está en la parte inferior del código de la página?

Vamos a empezar con las razones para incluir el código en el final. En la determinación de la posición: absoluta, para # confirman, sin z-index parámetro, la secuencia de objetos desde la posición: absoluta, que coincidirá con el orden en que son generados por el navegador. Última compilación, no será más que una pila de capas con position: absolute, así que si por ejemplo, tendrá las mismas dimensiones, máscara para la capa, que apareció en el código anterior.

¿Por qué no confirma el interior, pusimos dos veces al div? Para aclarar este punto es, acabo de leer la sección en el código css que se coloca dentro de la sección de la cabeza: 

  <style type="text/css">
 <! -
 * {Margin: 0px padding,: 0px;}
 body {margin: 10px;}
 p {width: 600px; margin: 0 auto; line-height: 25px;}

 / * CONFIRM * /
 # Confirmar {display: none; position: absolute; height: 100%; width: 100%; de fondo: # 000; la parte superior: 0; left: 0;}
 # {Confirmar la altura: la expresión (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ().: document.documentElement.scrollHeight) + "px"); ancho: la expresión (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, en el documento. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + "px");}
 # Confirmar [id] {position: fixed;}
 # Confirmar div {padding: 10px; margin-top: 200px;}
 Div # Confirmar div {background: # 900c0c; ancho: 500px; margin: 0 auto; border: 1px solid # CCC; overflow: hidden;}
 # Confirmar div h1 {font-size: 18px; color: # FFF;}
 # Confirmar div p {padding: 20px;}
 ->
 </ Style>

# Define este trabajo confirman los antecedentes que se "cubren" toda la página. La segunda línea, (el que tiene una altura extraña y ancho), es necesario en el caso de Internet Explorer. # Confirmar [id] es sólo comprensible para los navegadores modernos, y éste era el plan para el fondo de nuestra ventana era del tamaño de un 100% al 100% y se desarrolla durante todo el tiempo con el sitio (para IE se calcula en cada caso sobre la base de la anchura y la altura de la ventana).

El div primera es necesaria para el centro de la segunda y tomar cierta distancia de la ventana superior en el margen superior. El div segundos ya proporciona nuestra ventana para confirmar que puede estar centrado, como es el interior de un elemento de bloque con anchura: 100% (valor estándar para un elemento con pantalla: bloque - que es un div)

Tercera Tiempo para jQuery

Sigue siendo para nosotros de reaccionar a los clics en el enlace que aparece al final del bloque P, que puso lorem ipsum'a: 

  <a href="http://poslinski.net" class="confirm"> Mecenas </ a>

En nuestro caso, todos los vínculos con la clase de confirmación, va a reaccionar a la secuencia de comandos. Usted puede solicitar nuestro reconocimiento a todos los enlaces, para eliminar un valor de la base de datos.

Se requiere que el código JavaScript que se coloca en la parte inferior de la página: 

  src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Document). Ready (function () {
 $ (". Confirmar"). Haga clic en (function () {
 $ ("# Confirmar")
 . Css ({opacity: 0.95})
 . FadeIn ()
 . Html ('<div> <h1> redirección </ h1> <p <botón onClick = \ "location.href = \'' + $ (this). Attr (" href ") +" \ "\"> Sí </ button> <button> NO </ button> </ p> </ div> </ div> ');
 return false;
 });
 . $ ("# Confirmar") Haga clic en (function () {$ (this) FadeOut ();.});
 });
 </ Script>

La primera línea de carga de jQuery.

Entonces, la rama principal de nuestro código $ (document). Listo, activar su código, tras cargar una página.

Respondemos a hacer clic en el elemento con la clase de confirmación, lo que en este caso una serie de métodos en el elemento con id = confirman. Para comenzar, agregue una transparencia (pero sigue siendo un elemento está configurado para mostrar: ninguno), a continuación, utilizando el método de fadeIn, jQuery sin problemas pasa de display: none a la opacidad: 0,95 (en nuestro caso). Por último, en el interior del elemento de # confirmar, cargar el código html de nuestras dos divami, que se coloca en el interior del botón de la cabecera H1 y dos botones. Como probablemente, han notado una de ellas, además de que se declaren evento onClick, que va a reaccionar a un usuario una confirmación positiva, lo przekierowywując al lugar que mostró vínculo ha hecho clic.

¿Por qué return false al final de este bloque de código? Para el navegador, no redirigir automáticamente, haciendo clic en el enlace, nuestra función debe devolver false, de lo contrario volverá a dirigir y las ventanas se confirma la rosca.

Si hace clic en cualquier otro lugar que en el botón de "SI", el uso FadeOut caso (), el bloque va a desaparecer a la perfección con nuestra confirmación, que se da cuenta de $ ("# confirmar"). Haga clic en (...).

Todo el código escrito debe ser algo como esto: 

  <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 confirmación de <title> de diálogo </ title>
 <style type="text/css">
 <! -
 * {Margin: 0px padding,: 0px;}
 body {margin: 10px;}
 p {width: 600px; margin: 0 auto; line-height: 25px;}

 / * CONFIRM * /
 # Confirmar {display: none; position: absolute; height: 100%; width: 100%; de fondo: # 000; la parte superior: 0; left: 0;}
 # {Confirmar la altura: la expresión (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ().: document.documentElement.scrollHeight) + "px"); ancho: la expresión (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, en el documento. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + "px");}
 # Confirmar [id] {position: fixed;}
 # Confirmar div {padding: 10px; margin-top: 200px;}
 Div # Confirmar div {background: # 900c0c; ancho: 500px; margin: 0 auto; border: 1px solid # CCC; overflow: hidden;}
 # Confirmar div h1 {font-size: 18px; color: # FFF;}
 # Confirmar div p {padding: 20px;}
 ->
 </ Style>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur elite nisi nec.  Quisque ultrices Orci nisl quis.  Aliquam en el dolor.  Sed quam consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ante dictum ac aliquet.  Sapien etiam nulo, eget consequat, consequat vitae, molestie Identificación, Lectus.  En HAC habitasse dictumst platea.  Aliquam feugiat odio ac Lectus.  Suspendisse egestas nisl varius.  Morbi nulo.  Pellentesque aliquet interdum felis.  Vestibulum libero luctus euismod.  Suspendisse Sodales interdum Enimem.  Pellentesque Orcia.  Nulla Massa nunc, eleifend aka, eleifend varius, Cong eget, leo.  Vestibulum ante ipsum primis en faucibus Orci et ultrices posuere luctus cubilia Curae <br/>
 Aliquet Cras, quis lígula accumsan rutrum, lorem lorem velita dignissim, fermentum dignissim quam lígula en la lígula.  Nulla purus dictum interdum.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem, sempre aliquet, tempus de corriente alterna, rutrum gesta, líbero.  Etiam neque odio, blandit NEC, también conocido como suscipit, Pellentesque scelerisque, leo.  En Metus Identificación.  Vivamus rutrum.  Nulla NEC velita.  Nisi ut purus, en Porta, tincidunt sit amet, pulvinar scelerisque, sem.  Sed Risus nisi nec.  En nisi.  Augustin et al.  Phasellus ullamcorper quis tempus urna dapibus Lacus.  Est Sed eget  Etiam tellus erat, nisi nec NEC, sed placerat, ultricies un Orci,.  Cras ac Lectus.  Curabitur NEC lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> Mecenas </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Document). Ready (function () {
 $ (". Confirmar"). Haga clic en (function () {
 $ ("# Confirmar")
 . Css ({opacity: 0.95})
 . FadeIn ()
 . Html ('<div> <h1> redirección </ h1> <p <botón onClick = \ "location.href = \'' + $ (this). Attr (" href ") +" \ "\"> Sí </ button> <button> NO </ button> </ p> </ div> </ div> ');
 return false;
 });
 . $ ("# Confirmar") Haga clic en (function () {$ (this) FadeOut ();.});
 });
 </ Script>
 </ Body>
 </ HTML>

Resumen

Ejemplo de trabajo, se puede ver aquí .

Esta solución de la muestra no requiere todas las posibilidades. Podemos extender el código de manera que afecte el formulario de confirmación, a continuación, se envía al control de formulario, que también se puede hacer desde dentro de jQuery. Puede también, sobre la base del código anterior para crear un plugin para jQuery. Siéntase libre de hablar en los comentarios a esta entrada.

Sea Compartir Sociable,!

Artículos relacionados

Categorías: jQuery
Tags: , , , ,
«
»
Puedes seguir cualquier respuesta a esta entrada mediante el canal RSS 2.0 . También puede escribir sus propios comentarios , o para vincular a este post en su página.
    • Obraz CAPTCHY
    Actualizar la imagen
    *

    Protección contra el spam por WP-Libre de Spam