11034 Suscriptores al Feed del Blog
80 Suscriptores al Feed de Anotaciones Breves
36 usuarios online
Javi en YourFonts: convierte tu letra en una fuente personalizada
Crear cajas de mensajes con CSS y jQuery
8 COMENTARIOS - Publicado hace 14 meses - Clasificado en: JQUERY, CSS, TIPS, TUTORIALESHaciendo 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.
Ver ejemplo en funcionamiento » »
Descargar ejemplo completo » »
Algunas entradas relacionadas:
También te puede interesar:
|
|
|
|
|
COMENTARIOS
 |
Publicado hace 14 meses Jose - http://blog.moskis.net/ Yo hace años que uso un CSS parecido en mi blog, pero sin efectos jquery. La verdad es que tengo que hacer algo de limpieza en esa parte del css, asi que en parte esto me vendrá bien :) |
 |
Publicado hace 14 meses daTO - Muy bien tutorial, completo y detallado como siempre. Un saludo y feliz año nuevo !! |
 |
Publicado hace 14 meses Mauro - http://emebe.com.ar Yo agregaria la etiqueta image en el head asi no aparece la molesta barra del explorer sobre las imagenes |
 |
Publicado hace 14 meses demixo - http://demixo.org execlente aporte. Gracias. |
 |
Publicado hace 13 meses Oscar2h - No se porque razon no me resulta el tema de jquery, no desaparece el mensaje, me pueden ayudar porfaa |
 |
Publicado hace 13 meses ddsign - http://ddsign.wordpress.com Está genial! Gracias por el minitutorial y los ejemplos. |
 |
Publicado hace 4 meses Cesar Antonio Gonzalez Ramirez - http://clubdematematicas.com GRACIAS POR EL ARTICULO, SERÁ DE MUCHA UTILIDAD EN MI WEB. ATTE dESARROLLADOR WEB MEXICO |
 |
Publicado hace 4 semanas Belen - muy bueno el tuto! pero tengo una pregunta.. quiero que el mensaje me aparezca al yo hacer click en un link q tengo.. como hago eso? porque me aparece al iniciar la pagina y yo quiero que aparezca cuando hago el click te agradeceria si me respondes al mail por favor. gracias! |
