martes, 29 de octubre de 2013

Jquery ui - Cambiar propiedades CSS del cuadro de diálogo - dialog



En este apartado puedes ver las clases básicas de un cuadro de diálogo y como a partir de ellas ir modificando los estilos CSS de cada una de las partes en que se compone el cuadro de diálogo, las clases principales son ...

Para cambiar el fondo del cuadro de diálogo: .ui-dialog

Para cambiar el contenido del cuadro de diálogo, tamaño de fuente, color de fuente, ...: .ui-dialog .ui-widget-content

Para cambiar el fondo de la cabecera: .ui-dialog .ui-widget-header

Para cambiar el contenido de la cabecera, tamaño de fuente, color de fuente, ...:: .ui-dialog .ui-dialog-titlebar

A continuación podéis ver un ejemplo de como modificar los estilos CSS de un cuadro de diálogo de Jquery UI ...


<!-- 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>

<style>
/*para cambiar el fondo del cuadro de diálogo*/
.ui-dialog
{
background: #000000;
}

/*Para cambiar el contenido del cuadro de diálogo, tamaño de fuente, color de fuente, ...*/
.ui-dialog .ui-widget-content
{
color: #FFFFFF;
font-family: arial;
}

/*Para cambiar el fondo de la cabecera*/
.ui-dialog .ui-widget-header
{
background: #005533;
}

/*Para cambiar el contenido de la cabecera, tamaño de fuente, color de fuente, ...*/
.ui-dialog .ui-dialog-titlebar
{
color: #FFFFFF;
font-family: arial;
}
</style>

</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


Cuadro de diálogo con estilos CSS modificados.
</p>
</div>
</body>
</html>




1 comentario:

Unknown dijo...

Como puedo cambiar el icono del boton y tambien darle estilo al boton?
(El de cerrar, el tachesito xD) porfa