Notificaciones al estilo de Gnome (libnotify) con Jquery

closeHola! hace 5 years 5 months 25 days que escrib铆 esta entrada, puede que esta informaci贸n ya no sea valida en la actualidad, por favor se comprensivo conmigo cuando comentes 馃檪

Este es un plugin de jquery que nos permite crear notificaciones al estilo de Gnome (como las que vemos en Ubuntu) en nuestros sitios web, el uso es muy sencillo.

隆Lo Siento! Este link no esta disponible en el momento

Codigo JavaScript (noty.js)

var Message = {
    options: {
        appendTo: "body",
        autohide: 5,
        interval: 500,
        messageClass: "message",
        messageClassActive: "message-active",
        messageContainerClass: "messageContainer",
        messageWrapperClass: "message-wrapper",
        messageTextClass: "message-text",
        messageTitleClass: "message-title"
    },
    queue: [],
    container: null,
    init: function (a) {
        $.extend(this.options, a || {});
        if (this.options.autohide) {
            this.options.autohide *= 1000
        }
        $(this.options.appendTo).append($('<div id="__messageQueue__container"></div>').addClass(this.options.messageContainerClass));
        this.container = $("div#__messageQueue__container");
        if ("setInterval" in window) {
            window.setInterval(function () {
                Message.check()
            }, this.options.interval)
        } else {
            window.setTimeout(function () {
                Message.check(true)
            }, this.options.interval)
        }
        $("div#__messageQueue__container *").live("selectstart", function () {
            return false
        });
        $("div#__messageQueue__container *").live("mousedown", function () {
            $(this).css("MozUserSelect", "none");
            return false
        })
    },
    check: function (d) {
        var a = new Date().getTime();
        for (var b = 0; b < this.queue.length; b++) {
            var c = this.queue[b];
            if (c.unread) {
                c.unread = false;
                this.show(c.unique)
            } else {
                if (!c.active && !c.sticky && this.options.autohide && ((!c.autohide && c.time < (a - this.options.autohide)) || (c.autohide && c.time < (a - c.autohide)))) {
                    this.hide(c.unique)
                }
            }
        }
        if (d) {
            window.setTimeout(function () {
                Message.check(true)
            }, this.options.interval)
        }
    },
    add: function (d, c, b) {
        if (!c) {
            c = d.substr(0, 20);
            if (d.length > 20) {
                c += "..."
            }
        }
        if (!b) {
            b = {
                style: "",
                callback: false,
                autohide: false
            }
        } else {
            if (typeof b == "string") {
                b = {
                    style: b,
                    callback: false,
                    autohide: false
                }
            } else {
                if (typeof b == "function") {
                    b = {
                        style: "",
                        callback: b,
                        sticky: true,
                        autohide: false
                    }
                } else {
                    if (typeof b == "number") {
                        b = {
                            style: "",
                            callback: false,
                            autohide: b
                        }
                    } else {
                        if (typeof b == "object") {
                            if (b.callback) {
                                b.sticky = true
                            }
                        }
                    }
                }
            }
        }
        var a = new Date().getTime();
        return this.queue.push($.extend(b, {
            time: a,
            unique: a + "_" + (Math.floor(Math.random() * 90000) + 10000),
            text: d,
            title: c,
            unread: true,
            active: false,
            sticky: (b.sticky || b.style.match(/bstickyb/i) ? true : false)
        }))
    },
    remove: function (b) {
        for (var a = this.queue.length - 1; a >= 0; a--) {
            if (this.queue[a].unique == b) {
                this.queue.splice(a, 1)
            }
        }
        return true
    },
    get: function (b) {
        for (var a = this.queue.length - 1; a >= 0; a--) {
            if (this.queue[a].unique == b) {
                return this.queue[a]
            }
        }
        return false
    },
    show: function (b) {
        var a = this.get(b);
        $(this.container).append($('<div id="__messageId_' + a.unique + '"></div>').addClass(this.options.messageClass).append($("<div></div>").addClass(this.options.messageWrapperClass).append($("<div></div>").addClass(a.style).append($("<h1></h1>").addClass(this.options.messageTitleClass).html(a.title)).append($("<p></p>").addClass(this.options.messageTextClass).html(a.text))).data("unique", a.unique).click(function () {
            Message.hide($(this).data("unique"))
        }).mouseenter(function () {
            Message.active($(this).data("unique"))
        }).mouseleave(function () {
            Message.inactive($(this).data("unique"))
        })).css({
            opacity: 0
        }).animate({
            opacity: 1
        }, 300));
        $(this.container).hide();
        $(this.container).slideToggle('slow');
    },
    hide: function (b) {
        var a = this.get(b);
        if (a.callback) {
            a.callback()
        }
        this.remove(b);
        $("div#__messageId_" + b).animate({
            height: "0px",
            opacity: "0",
            "margin-bottom": "0px"
        }, 300, "linear", function () {
            $(this).remove()
        })
    },
    active: function (b) {
        var a = this.get(b);
        $("div#__messageId_" + b).addClass(this.options.messageClassActive);
        a.active = true
    },
    inactive: function (b) {
        var a = this.get(b);
        $("div#__messageId_" + b).removeClass(this.options.messageClassActive);
        a.active = false
    }
};
 
 
function mensaje() { 
Message.init(); 
Message.add($("#msg").val(), $("#titulo").val(), $("#tipo").val()); 
}

C贸digo CSS (style.css)

/* Import Google Fonts */
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans'), url('http://themes.googleusercontent.com/font?kit=POVDFY-UUf0WFR9DIMCU8g') format('truetype');
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: bold;
  src: local('Droid Sans'), url('http://themes.googleusercontent.com/font?kit=EFpQQyG9GqCrobXxL-KRMVtXRa8TVwTICgirnJhmVJw') format('truetype');
}
 
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Page reset */
	margin:0px;
	padding:0px;
}
 
body{
	/* Setting default text color, background and a font stack */
	color:#444444;
	font-size:13px;
	background: url('img/bg.png') #f2f2f2 repeat-x;
	font-family: "Ubuntu", "UbuntuBeta", "Droid Sans", sans-serif;
 
}
 
table{
	margin: 20px auto;
	border:1px #BFBFBF solid;
	background-color: #FFFFFF;
}
/* Notificaciones */
 
div.messageContainer {
  font-family: Sans-serif;
  position: fixed;
  top: 5px;
  right: 5px;
  width: 320px;
  z-index:99999;
}
 
* html div.messageContainer {
  position: absolute;
  top: expression((ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + 'px');
}
 
div.messageContainer div.message {
  background: transparent url(noty/message-background.png) repeat left top;
  position: relative;
  margin: 0 0 10px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: #333 2px 2px 3px;
  -webkit-box-shadow: #333 2px 2px 3px;
  box-shadow: #333 2px 2px 3px;
}
 
div.messageContainer div.message-active {
  background: #333;
}
 
div.messageContainer div.message div.message-wrapper {
  padding: 10px 15px;
}
 
div.messageContainer div.message div.message-wrapper div {
  min-height: 50px;
}
 
* html div.messageContainer div.message div.message-wrapper div {
  height: 50px;
}
 
div.messageContainer div.message div.message-wrapper div.warning {
  padding: 0 0 0 60px;
  background: transparent url(noty/message-icon-warning.gif) no-repeat left top;
}
 
div.messageContainer div.message div.message-wrapper div.information {
  padding: 0 0 0 60px;
  background: transparent url(noty/message-icon-information.gif) no-repeat left top;
}
 
div.messageContainer div.message div.message-wrapper div.error {
  padding: 0 0 0 60px;
  background: transparent url(noty/message-icon-error.gif) no-repeat left top;
}
 
div.messageContainer div.message div.message-wrapper h1.message-title {
  margin: 0;
  padding: 5px 0;
  font-size: 13px;
  color: #eee;
  -moz-text-shadow: #333 1px 1px 2px;
  -webkit-text-shadow: #333 1px 1px 2px;
  text-shadow: #333 1px 1px 2px;
  cursor: default;
}
 
div.messageContainer div.message div.message-wrapper p.message-text {
  margin: 0;
  padding: 5px 0;
  font-size: 12px;
  color: #eee;
  -moz-text-shadow: #333 1px 1px 2px;
  -webkit-text-shadow: #333 1px 1px 2px;
  text-shadow: #333 1px 1px 2px;
  cursor: default;
}

C贸digo HTML (index.html)

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="noty.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
 
</head>
<body>
<table>
	<tr>
		<td>Mensaje: </td><td><input type="text" id="msg"> </td>
	</tr>
	<tr>
		<td>Titulo: </td><td><input type="text" id="titulo"> </td>
	</tr>
	<tr>
		<td>Tipo: </td><td>
						<select id="tipo">
						sticky, warning, warning sticky, error, error sticky, information, information sticky
							<option value="sticky">sticky</option>
							<option value="warning">warning</option>
							<option value="warning sticky">warning sticky</option>
							<option value="error">error</option>
							<option value="information">information</option>
							<option value="error sticky">error sticky</option>
							<option value="information sticky">information sticky</option>
						</select>
		</td>
	</tr>
	<tr><td colspan="2"><input type="button" value="Mensaje" onclick="mensaje();"></td></tr>
</table>
 
 
 
 
</body>
</html>

You may also like...

2 Responses

  1. Interesante plugin, adem谩s lo explicas de tal forma que parece muy f谩cil de implementar.
    Gracias y felicidades por el blog.

  2. cesar dice:

    hola q tal!!
    me parecio muy bueno este complemento!!
    pero quisiera saber como hacerle para que las notificaciones no desaparescan al actualizar la pagina o al cambiar de lugar

    quisiera la forma para que aparecieran en todo el sitio
    que el admin mande un mensaje y q lo puedan ver todos!!

    saludos!!

Deja un comentario

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