Notimoo
Tras unos meses de trabajar con Mootools, he decidido hacer mi aportación a la comunidad.
Notimoo es una pequeña librería Javascript (4 kb) para mostrar notificaciones en páginas web.
La idea es que puedas mandar mensajes de notificación a los usuarios de tu web de manera elegante y no intrusiva. (demo).
Las características principales de Notimoo son:
- Su uso es muy sencillo
- Es áltamente configurable
- Respaldado por la potencia de Mootools (versiones 1.2 y 1.2.1)
- Ha sido probado en Firefox, Safari, Opera, Chrome e Internet Explorer
- Licencia MIT (haz lo que quieras con el código)
Visita la web del plugin en Google Code para descargar el código. Es un archivo comprimido con dos versiones: una documentada y otra comprimida.
Vamos a ver un poco de código para comprobar la facilidad de uso:
// Notimoo utiliza una única instancia (a modo de gestor)
// para una ejecución más eficiente.
// Aqui lo inicializamos con la configuración por defecto.
var notificationManager = new Notimoo();
// Mostrar notificacion
notificationMananger.show({
title: 'Mensaje de PaquitoSoft',
message: 'Ésta es una notificación de ejemplo ' +
'para demostrar la sencillez de uso de Notimoo.'
});
// Dos segundos después mostramos una notificación permanente.
// Pincha sobre ella para cerrarla.
(function() {
notManager1.show({
title: 'Mensaje de PaquitoSoft',
message: 'Ésta es una notificación de ejemplo ' +
'permanente. Pulsa sobre ella para eliminarla.',
sticky: true
});
}).delay(2000);
// Si el mensaje no cabe en el tamaño predeterminado de la
// notificación, ella sola se redimensiona para mostrar
// correctamente el contenido.
(function() {
notManager1.show({
title: 'Mensaje de PaquitoSoft',
message: 'Ésta es una notificación de ejemplo ' +
'con un mensaje demasiado largo para el tamaño ' +
'de la notificación. Afortunadamente, el redimensionado ' +
'se hace de forma automática.'
});
}).delay(4000);
Pulsa aquí para ver la demostración
Aquí os dejo los parámetros con los que se puede configurar tanto la instancia del gestor de notificaciones como la llamada a la función que muestra la notificación.
Para más información descárgate la librería y échale un vistazo al código (está bastante documentado). De todos modos, en la web del proyecto alojada en Google Code también hay bastante información de cómo usarlo.
//CONFIGURACIÓN DEL GESTOR DE NOTIFICACIONES \\ /** * Options to configure the notification manager. * @param String parent -> parent element where notifications * are going to be inserted (defaults to 'body' tag) * @param int height -> height of the notification DOM element * (in pixels -defaults to 50-) * @param int width -> width of the notification DOM element * (in pixels -defaults to 300-) * @param int visibleTime -> time the notification is displayed * (in miliseconds -defaults to 5000-) * @param String locationVType -> whether you want the notifications to be * shown on the top or the bottom of the parent element * (defaults to 'top') * @param String locationHType -> whether you want the notification to be * shown at the left or right of the parent element * (defaults to 'right') * @param int locationVBase -> vertical base position for the notifications * (in pixels -defaults to 10-) * @param int locationHBase -> horizontal base position for the notifications * (in pixels -defaults to 10-) * @param int notificationsMargin -> margin between notifications * (in pixels -defaults to 5-) * @param int opacityTransitionTime -> duration for notification opacity transition * (in miliseconds -defaults to 750-) * @param int closeRelocationTransitionTime -> duration for notification relocation * transition when one of them is close (in miliseconds -defaults to 750-) * @param int scrollRelocationTransitionTime -> duration for notification relocation * transition when parent scroll is moved (in miliseconds -defaults to 250-) * @param Number notificationOpacity -> opacity used when the notification is displayed (defaults to 0.95) * @param Function onShow -> callback to be executed when the notification * is displayed. The notification element is passed as a parameter. * @param Function onClose -> callback to be executed when the notification * is closed. The notification element is passed as a parameter. */
// FUNCION PARA MOSTRAR LAS NOTIFICACIONES \\ /** * Function to actually show a notification. * @param String title (optional) -> Title for the notification * @param String message (required) -> Message for the notification * @param booleam sticky (optional) -> Whether the notification won't be removed * until user interaction (defaults to false) * @param int visibleTime (optional) -> Time for the notification to be displayed * (in milliseconds). If this isn't provided, the global one will be used. * @param int width (optional) -> Width fot the notification (in pixels). * If this isn't provided, the global one will be used. */