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 id=”26″ format=”1″]
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> |