Notificaciones al estilo de Gnome (libnotify) con Jquery

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.

Download Notificaciones al estilo de Gnome (libnotify) con Jquery

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(/\bsticky\b/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>

Quizás también le interese:

Auto Imagen Relacionadas en WordPress – Google Search
Si queremos Mostrar imágenes relacionadas en nuestros artículos de wordpress (Con algunas modific…
Ocultar y mostrar div (Elementos) fácilmente con jquery (Toggle)
Con la función toogle de jquery podemos ocultar y mostrar un div fácilmente con una sola linea de…
Spritely: Plugin jquery background animados
Spritely es un plugin de jquery que te permite crear background (fondos) en tu sitio web animados…
Jquery FLIP: Plugin para mostrar div con efectos (Animaciones) :: JavaScript
Jquery flip, es un plugin para jquery que nos permite mostrar div con efectos FLIP (Rotando), es …
JQuery Cycle: Plugin para realizar slideshow de imagenes o Divs
JQuery Cycle es un excelente plugin para JQuery, que nos permite realizar slideshow de nuestras f…