[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 
.
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.
Luego vamos a crear el contexto para utilizar Linq2Sql, de manera de que, con poco código, podamos tener la funcionalidad que deseamos.
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:
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.
Espero que te sirva!,
Nos vemos
Chalalo.