Tema: Función para mostrar alertas / notificaciones con JQUERY
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 01/05/2010, 13:46
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
Podes usar la propiedad position para ubicar cada mensaje en lugares diferentes. Lee la API!




Todo lo que vaya entre llaves en una opcion de lanzamiento.

Para evitar el close all usa:

closer: false
Hola mayid,

Para que el mensaje se aguante fijo sin que desaparezca con el sticky lo consigo.

Sin embargo, hay dos propiedades que no consigo que funcionen si las especifico dentro de las propiedades del mensaje

Son el closer y el position


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. <head>
  4. <title>Mensaje superior</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  7. <script type="text/javascript" src="jquery.jgrowl_minimized.js"></script>
  8. <link rel="stylesheet" href="jquery.jgrowl.css" type="text/css" />
  9.  
  10. <script type="text/javascript">
  11.  
  12. $(document).ready(function() {
  13.     //$.jGrowl.defaults.position = 'center';
  14.     //$.jGrowl.defaults.closer=false;
  15.     $.jGrowl("Stick this!", {closer: false, sticky: true, theme:'rojo', position: 'bottom-left' });
  16.     $.jGrowl("wwwww!", {closer: false, sticky: true, theme:'verde', position: 'top-right' });
  17. });
  18.  
  19. </script>
  20. <style type="text/css">
  21. div.jGrowl div.verde {
  22.     background-color: #77EF6A;
  23.     color: #000;
  24.     width:  100px;
  25.     height:20px;
  26. }
  27. div.jGrowl div.rojo {
  28.     background-color: #EF6A77;
  29.     color: #000;
  30.     width:  300px;
  31.     height:20px;
  32. }
  33.  
  34. body > div.jGrowl.center {
  35.     top:                0px;
  36.     left:               10%;
  37. }
  38.  
  39. body > div.jGrowl.bottom-left {
  40.     left:               0px;
  41.     bottom:             0px;
  42. }
  43.  
  44. body > div.jGrowl.top-right {
  45.     right:              0px;
  46.     top:                0px;
  47. }
  48.  
  49. </style>
  50. </head>
  51. <body>
  52.  
  53. </body>
  54. </html>


Para que funcione el closer y el position tengo que ponerlo fuera del mensaje, extraño no?

Y claro si los pongo fuera afecta a todos los mensajes que aparezcan (y no es lo adecuado). ¿Puedes echarme una mano?

$(document).ready(function() {
$.jGrowl.defaults.position = 'center';
$.jGrowl.defaults.closer=false;

$.jGrowl("Stick this!", {sticky: true, theme:'rojo', position: 'bottom-left' });
$.jGrowl("wwwww!", {sticky: true, theme:'verde', position: 'top-right' });
});

Muchas gracias de antemano!