martes, 29 de octubre de 2013

Jquery ui - Cuadro de diálogo con diseño responsable - responsive design



Hola amig@s, a continuación os muestro el modo de convertir vuestros cuadros de diálogos de Jquery UI con diseño responsable (Responsive design), he encontrado la forma recorriendo todos los elementos div buscando el atributo role="dialog", de este modo puedo acceder a sus propiedades CSS y cambiarlas y aplicar porcentajes, el procedimiento es libiano y fácil de entender en el ejemplo viene comentado y sólo tendréis que cambiar las propiedades CSS a vuestro gusto.


<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {

$( "#dialog" ).dialog({autoOpen: false});
$("#open_dialog").click(function(){
$( "#dialog" ).dialog("open");
dialog_responsive();
});


function dialog_responsive(){
/*Diseño responsable para los cuadros de diálogo*/
$("div").each(function(){
if ($(this).attr("role") == "dialog")
{
/*Modifica las propiedades CSS a tu gusto*/
$(this).css({width: "100%", minWidth: "250px", minHeight: "150px", left: "0px", top: "50px"});
}
});
}

});
</script>
</head>
<body>
<input type="button" id="open_dialog" value="Abrir cuadro de diálogo">
<div id="dialog" title="Basic dialog">
<p>
Cuadro de diálogo de Jquery UI autoajustable a la resolución de la ventana, DISEÑO RESPONSABLE - RESPONSIVE DESIGN
<br>
Cuadro de diálogo con estilos CSS modificados.
</p>
</div>
</body>
</html>




1 comentario:

Anónimo dijo...

Como se puede hacer mas de un cuadro dialogo el primero lo edito bien en CSS pero el segundo o tercero siempre quedan en otra posicion aunque cambie el CSS