Como soy masoquista, tras un duro día desarrollando en PHP/Javascript creo que voy a hacer una entrada sobre informática en mi blog… por seguir esta racha.
Hoy he tenido mi primera experiencia con jQueryUI, una biblioteca para el framework jQuery. Lo he utilizado para crear un formulario de correo en una ventana modal y… oye, qué fácil, qué productividad reporta esta librería. En este enlace tenéis a vuestra disposición dicha librería, con muchas demos y documentación.
Para el caso de las ventanas modales tendremos que recurrir al widget «dialog», que nos permitirá hacer desde una suerte de alert más sofisticado hasta introducir todo un formulario (como era mi caso).
El uso de dialog() puede resumirse con facilidad en el siguiente ejemplo:
<html>
<head>
<link rel="stylesheet" href="css/darkness/jquery-ui-1.8.18.custom.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script>
$(function(){
$("#ventanaModal").dialog({
title:"Título a elegir",
modal: true
});
})
</script>
</head>
<body>
<div id="ventanaModal"></div>
<p>Aquí metes lo que quieras</p>
</div>
</body>
</html>
Con esto tenéis lo mínimo para tener una ventana modal: un div con el contenido al que aplicáis el método dialog pasándole como parámetros el título y el parámetro modal como true (si no le pasárais modal: true se abriría también, pero no bloquería los elementos del fondo, como debe hacer una ventana modal). Pero esto queda muy soso, así que vamos a ir haciendo cosillas.
Lo primero es meter algo más de contenido, para que veas las posibilidades. Por ejemplo, una pregunta que requiera confirmación (como en un window.confirm de los de antaño):
<div id="ventanaModal">
<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
¿Acepta usted las condiciones de uso y que le espiemos impunemente?
</div>
Ahora ya tenemos un aviso de seguridad, vamos con lo siguiente, meterle algún efectillo a la página para que quede chulo cuando se despliega en pantalla:
$("#ventanaModal").dialog({
title:"Título a elegir",
modal: true,
show: "slide",
hide: "explode"
});
Con esto aparecerá deslizándose y desaparecerá explotando en mil pedazos (bueno, realmente en nueve pedazos). En cualquier caso te habrás fijado en que no hay botones dentro del div. ¿Por qué? Porque los creó la desde javascript definiendo la propiedad buttons, que recibe como parámetro un objeto json con la información y con su función:
buttons: {
"Sí": function(){
alert("has aceptado, tu alma es nuestra");
},
"No": function(){
alert("no has aceptado, te jodes y te quedas sin servicio");
}
}
Como resumen entonces el javascript completo quedaría tal que así:
$("#ventanaModal").dialog({
title:"Título a elegir",
modal: true,
show: "slide",
hide: "explode",
buttons: {
"Sí": function(){
alert("has aceptado, tu alma es nuestra");
},
"No": function(){
alert("no has aceptado, te jodes y te quedas sin servicio");
}
}
});
En este caso son dos alerts chorras, pero sirve para que te hagas una idea del potencial que tiene este widget si ya has trabajado antes con javascript.
Nos queda añadir un botón, mismamente, en el html que llame a la ventana y la abra (es decir, el botón en el marcado y el script con la acción). Algo tipo:
<input type="button" name="accept" id="accept" value="Aceptar"/>
<script>
$("#accept").button().click(function() {
$("#ventanaModal").dialog("open");
});
</script>
Y con esto y un bizcocho… se acabó el ejemplo. Ahora te recomiendo que te pelees un rato con esta librería, porque parece que puede dar muchas alegrías.
DonnierocK 
Has puesto mal el enlace a jqueryui.com
Gracias por el aviso, ya está arreglado.
Tienes algun sitio donde se puede ver el ejemplo??
En http://jquery.com puedes ver ejemplos, en la sección de JQueryUI
Hola,
muy interesante tu artículo, estoy interesado en el uso de jquery, estoy viendo otro ejemplo: http://cazaresluis.com/wordpress/2012/03/ventana-de-dialogo-con-html-jquery-jquery-ui-formulario-jquery-validate-ii/#comments . lo que no sé es como enviar los datos a otro archivo php en el cual procese los datos, y creo que obtener los datos se hace de forma normal por POST_[‘nombre_variable’] espero no equivocarme… podría colaborarme con un ejemplo sencillo sobre como envio los datos a otro archivo .php y que muestre que se ha procesado correctamente o algo asi???
muchas gracias de antemano
robin
trate de probar tu codigo, pero no me funciono
Puede que sea porque al hacer una edición se ha cargado parte del código, voy a arreglarlo.
Ya está arreglado, al hacer una edición menor abrí con el editor en modo visual en lugar de en modo texto plano y se cargó parte de las etiquetas de los ejemplos, ahora ya debería funcionar.