[Tips] Usar Ventana de Notificación con JQuery al estilo Outlook

Buscando algunos plugins interesantes es que hace un tiempo me tome con : http://mosesofegypt.net/post/jQueryui-Messenger-Outlook-like-message-notification-Widget.aspx

Notificaciones al estilo Outlook, por lo que me decidí a modificar el ejemplo que ahí sale y agregarle alguna pequeñas opciones al ejemplo. Si quieres pasas al paso 6 y ves el ejemplo de inmediato en un video Sonrisa.

Si no, vamos paso a paso para que veas lo útil que es este plugin.

Paso 1: Base de Datos

Voy a crear una BD Simple, con los siguientes campos, la idea es que podamos mostrar un mensaje en un rango de tiempo desde fechaInicio hasta fechaFin y que además definamos el ícono de notificación.

image

Luego vamos a crear el contexto para utilizar Linq2Sql,  de manera de que, con poco código, podamos tener la funcionalidad que deseamos.

image

Paso 2: WebService

El WebService nos proveerá de los datos para armar el mensaje, en este caso, (hay formas mejores) , obtenemos el registro de notificación que corresponde al momento de la consulta, en el caso que exista registro, se devuelve el objeto, en el caso que no, capturo la excepción generada ( el método single, si no tiene un resultado, levanta el error) e instancio un nuevo objeto y lo devuelvo con el ID:0  (para que en  el código JS se sepa cuando no existe notificación).

<WebMethod()> _

    Public Function getNotificacion() As notificacione

        Dim contexto As New NotificacionModelDataContext

        Dim notificacion As notificacione

        Try

            notificacion = (From p In contexto.notificaciones _

                            Where p.fechaInicio <= Date.Now _

                            And p.fechaFin >= Date.Now).Single

            Return notificacion

        Catch ex As Exception

            Return New notificacione With {.id = 0}

        End Try

 

    End Function

Paso 3 :Agregamos las referencias

Ahora en la pagina Default.aspx vamos a agregar las referencias a los archivos que participan en el ejemplo.

<link href=”styles/notificationmsg.css” rel=”stylesheet” type=”text/css” />

<script type=”text/javascript”  src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js “></script>

<script type=”text/javascript” src=”jQuery/ui.core.js”></script>

<script type=”text/javascript” src=”jQuery/ui.notificationmsg.js”></script>

La Estructura es la siguiente:

image

Paso 4: El código JavaScript (JQuery)

Seteamos con setInterval que la función getMensaje se ejecute cada 10 segundos, de manera que se este revisando constantemente, puedes ver también parte de la configuración del plugin, como el estilo de animación, la duración en pantalla (period:2500) en milisegundos y la función asociada al botón X para cerrar.

Acá es donde utilizamos el Id:0 que te comentaba anteriormente, ya que si no hay mensaje, devuelvo el valor 0, y no muestro la pantalla.

Si el valor es mayor que 0, quiere decir que recuperé un mensaje de notificación y seteo los div y span de manera de mostrar el mensaje.

<script type=”text/javascript”>

$(document).ready(function () {

   setInterval(getMensaje, 10000);

   function getMensaje() {

      var animStyle = ‘slide’;

      $(‘#msg1’).notificationmsg({ period: 2500 });

      $(‘#closebutton’).click(function ()
                          { $(‘#msg1’).notificationmsg(‘hide’); });

      $.ajax({
           type: “POST”,

           url: “NotificacionWS.asmx/getNotificacion”,

           data: “{}”,

           contentType: “application/json; charset=utf-8”,

           dataType: “json”,

           success: function (response) {

               var mensaje = response.d;

               if (mensaje.id > 0) {

                  $(“#modalbody”).text(mensaje.mensaje);

                  $(“#icono”).html(“<img src='” + mensaje.icono + “‘/>”);

                  $(‘#msg1’).notificationmsg({ animation: animStyle });

                  $(‘#msg1’).notificationmsg(‘show’);

                }

              },

            failure: function (msg) {

                alert(msg);

            }

         });

       }

    });

</script>

Paso 5 : El Código HTML

Este código, corresponde a la ventana de notificación propiamente tal, puedes dejarlo en tu masterPage para disponibilizarlo a toda la aplicación Web.

<div id=”msg1″>
  <div id=”modal”>
   <div class=”modaltop”>

     <div class=”modaltitle”>Información</div>

        <span id=”closebutton” style=”cursor: hand”>

         <img alt=”Hide Popup” src=”styles/img/close_vista.gif” border=”0″/>

        </span>

     </div>

     <div class=”modalbody”>

       <table style=”width: 100%;”>

          <tr>

             <td>

                <div id=”icono”></div>

             </td>

              <td>
                 <span id=”modalbody”></span>

              </td>

          </tr>

       </table>

      </div>

     </div>

</div>

Paso 6: El Videíto!, para que te entusiasmes a usarlo.

 

Notificaciones con Jquery…..

 

Paso 7: Descarga el Ejemplo.

 image

Espero que te sirva!,
Nos vemos
Chalalo.

4 comentarios en “[Tips] Usar Ventana de Notificación con JQuery al estilo Outlook”

  1. Excelente tip…

    Siempre he querido aprender a usar Jquery con Visual Studio… y me estás dando una gran mano…

    Saludos… felicitaciones… y muchas gracias nuevamente…

    PD: ¿Hay que usar el VS 2010 o se puede hacer con cualquiera?

  2. Excelente gonzalo, perdonando la expresión “LA CAGO” Esta muy bueno este tips, guardaré el ejemplo por si alguna vez lo necesite, Creo que en algun momento lo necesitaré muchas Gracias. 😀

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *