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. Si necesitas más información sobre este tema puedes consultar "CSS Message Boxes for different message types" .
.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 "Knob Buttons Toolbar icons".
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.
