Ver Mensaje Individual
  #3 (permalink)  
Antiguo 01/05/2010, 10:21
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 8 meses
Puntos: 20
Respuesta: Función para mostrar alertas / notificaciones con JQUERY

Cita:
Iniciado por mayid Ver Mensaje
En document.ready tenes una variable $change no declarada. Que por otro lado no se entiende si es de php o de jquery.

Probaste un prefabricado?:
http://www.anieto2k.com/2008/12/31/j...mpt-y-confirm/
http://abeautifulsite.net/2008/12/jquery-alert-dialogs/

Hay varios. A mi me gusta en particular el jGrowl.
Estoy siguiendo tu consejo y estoy utilizando el plugin de jquery.jgrowl

Tengo un par de dudas:
No consigo alinear cada mensaje de una manera diferente. Con el theme consigo cambiarle los colores al mensaje y diferenciarlos, eso correcto. Pero lo que quiero es por ejemplo uno aparezca centrado y el otro a la derecha de la pantalla.

He probado con position pero no me hace nada, la única forma que he logrado que funcione es poniendo $.jGrowl.defaults.position = 'center'; al comienzo, pero me lo aplica a todos los mensajes...

También me gustaría saber si se puede quitar el "close all" que aparece cuando muestras varios mensajes a la vez.


Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <title>Mensaje superior</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  6. <script type="text/javascript" src="jquery.jgrowl_minimized.js"></script>
  7. <link rel="stylesheet" href="jquery.jgrowl.css" type="text/css" />
  8.  
  9. <script type="text/javascript">
  10.  
  11. $(document).ready(function() {
  12.     //$.jGrowl.defaults.position = 'center';
  13.     $.jGrowl("Has recibido un nuevo mensaje de Darucilla!", {position:'center',theme:'verde'});
  14.     $.jGrowl("Mensaje eliminado!", {position:'bottom-left',theme:'rojo'});
  15. });;
  16.  
  17. <style type="text/css">
  18. div.jGrowl div.verde {
  19.     background-color:       #77EF6A;
  20.     color:                  #000;
  21. }
  22. div.jGrowl div.rojo {
  23.     background-color:       #EF6A77;
  24.     color:                  #000;
  25. }
  26.  
  27. body > div.jGrowl.center {
  28.     top:                0px;
  29.     left:               10%;
  30. }
  31. </head>
  32.  
  33. </body>
  34. </html>

Muchas gracias de antemano!