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 