DIPLOX

Crear cajas de mensajes con css y jquery

Por sereno

Sábado, 19/03/2011

Crear cajas de mensajes con css y jquery

Haciendo uso de CSS y jQuery podemos mostrar de una manera mucho más atractiva los mensajes que deseemos mostrar al usuario de nuestro sitio o aplicación web. Lo primero que deberemos hacer es crear el CSS para nuestras cajas.

.info, .exito, .alerta, .error {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url (´info.png´);
}
.exito {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url (´exito.png´);
}
.alerta {
color: #9F6000;
background-color: #FEEFB3;
background-image: url (´alerta.png´);
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url (´error.png´);
}

Los iconos utilizados para este ejemplo son http://Itweek.deviantart.com/art/Knob-Buttons-Toolbar-icons-73463960

El código XHTML sería, para cada uno de los mensajes, algo similar a:

<div class=¨info¨>Mensaje de información que deseamos mostrar al usuario</div>
<div class=¨exito¨>Mensaje de éxito de la operación realizada</div>
<div class=¨alerta¨>Mensaje de alerta que deseamos mostrar al usuario</div>
<div class=¨error¨>Mensaje que informa al usuario sobre el error que se ha producido</div>

Lo que nos daría un resultado similar al siguiente:

Ahora tan sólo queda añadir algún tipo de efecto con jQuery. Para poder interactuar con las cajas de mensajes de una forma genérica con jQuery, le añadiremos una clase más a cada uno de los elementos:

<div class=¨info mensajes¨>Mensaje de información que deseamos mostrar al usuario</div>
<div class=¨exito mensajes¨>Mensaje de éxito de la operación realizada</div>
<div class=¨alerta mensajes¨>Mensaje de alerta que deseamos mostrar al usuario</div>
<div class=¨error mensajes¨>Mensaje que informa al usuario sobre el error que se ha producido</div>

Ahora tan sólo queda darle algún efecto con jQuery. Podemos animar el mensaje, cambiarlo de color, hacerlo aparecer, etc. En este ejemplo, y creo que es una forma bastante interesante de mostrar los mensajes, la caja que muestra el mensaje aparece, permanece durante tres segundos y desaparece tras un ligero parpadeo.

El código para ello sería:

$(document).ready (function (){
setTimeout (function (){ $(¨.mensajes¨).fadeOut (800).fadeIn (800).fadeOut (500).fadeIn (500).fadeOut (300);}, 3000);
});

El código para este ejemplo sería:

<!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=iso-8859-1¨ />
<title>Mensajes2</title>
<style type=¨text/css¨>
.info, .exito, .alerta, .error {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url (´info.png´);
}
.exito {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url (´exito.png´);
}
.alerta {
color: #9F6000;
background-color: #FEEFB3;
background-image: url (´alerta.png´);
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url (´error.png´);
}
</style>
<script type=¨text/javascript¨ src=¨jquery-1.2.6.js¨></script>
<script type=¨text/javascript¨>
$(document).ready (function (){
setTimeout (function (){ $(¨.mensajes¨).fadeOut (800).fadeIn (800).fadeOut (500).fadeIn (500).fadeOut (300);}, 3000);
});
</script>
</head>
<body>
<div class=¨exito mensajes¨>Mensaje de éxito de la operación realizada</div>
<p>El mensaje desaparecerá a los tres segundos.</p>
</body>
</html>

Lógicamente podremos cambiar el tipo de mensaje variando la primera clase del div en función del resultado de las operaciones realizadas por el usuario o por la información que deseemos suministrarle.

EJEMPLO:

http://Www.webintenta.com/Files/Images/v8/Mensajes/Ejemplo2.html

DESCARGAR:

http://Www.webintenta.com/Files/Images/v8/Mensajes/MensajesjQuery.rar

Por sereno