From ec67945aec3fd81f9030bf64a461bacfa3513bda Mon Sep 17 00:00:00 2001 From: Eric Hynds Date: Fri, 14 May 2010 09:19:26 -0400 Subject: [PATCH] added ability to choose the template you want to use when creating a notification. exposed widget() method in "instance" object. better demos --- README.markdown | 2 +- index.htm | 102 +++++++++++++++++++++++++------------------ src/jquery.notify.js | 53 ++++++++++++++++++---- ui.notify.css | 3 +- 4 files changed, 105 insertions(+), 55 deletions(-) diff --git a/README.markdown b/README.markdown index 3303726..fdf22cb 100644 --- a/README.markdown +++ b/README.markdown @@ -7,7 +7,7 @@ Uses RGBA, border-radius, and box-shadow, so they're not as pretty as they could ## Features - No images, all CSS -- Roughly 100 lines of code +- Lightweight. Barely 2.5kb in size - Built on top of the jQuery UI widget factory - Templating system: include whatever you want inside notifications (images, links, etc.) - beforeopen, open, close, and click events diff --git a/index.htm b/index.htm index 0eb8034..a31e833 100644 --- a/index.htm +++ b/index.htm @@ -10,39 +10,10 @@ - @@ -77,17 +77,33 @@

jQuery UI Notify Widget

- + +
- +
-
-
#{icon}
+ +
+ x +

#{title}

+

#{text}

+
+ +
x +
#{icon}
+

#{title}

+

#{text}

+
+ +

#{title}

#{text}

+

+ +

diff --git a/src/jquery.notify.js b/src/jquery.notify.js index 63618ac..82f199c 100644 --- a/src/jquery.notify.js +++ b/src/jquery.notify.js @@ -1,3 +1,18 @@ +/* + * jQuery Notify UI Widget 1.0 + * Copyright (c) 2010 Eric Hynds + * + * http://www.erichynds.com/jquery/a-jquery-ui-growl-ubuntu-notification-widget/ + * + * Depends: + * - jQuery 1.4 + * - jQuery UI 1.8 (core, widget factory) + * + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * +*/ (function($){ $.widget("ui.notify", { @@ -6,11 +21,27 @@ $.widget("ui.notify", { expires: 5000 }, _create: function(){ - this.template = this.element.children().addClass("ui-notify-padding").wrap('
').end().html(); - this.element.empty().addClass("ui-notify"); + var self = this; + this.templates = {}; + this.keys = []; + + // build and save templates + this.element.addClass("ui-notify").children().addClass('ui-notify-message').each(function(i){ + var key = this.id || i; + self.keys.push(key); + self.templates[key] = $(this).removeAttr("id").wrap("
").parent().html(); // because $(this).andSelf().html() no workie + }).end().empty(); + }, - create: function(msg, opts){ - return new $.ui.notify.instance(this)._create(msg, $.extend({}, this.options, opts)); + create: function(template, msg, opts){ + if(typeof template === "object"){ + opts = msg; + msg = template; + template = null; + } + + // return a new notification instance + return new $.ui.notify.instance(this)._create(msg, $.extend({}, this.options, opts), this.templates[ template || this.keys[0]]); }, _setOption: function(key, value){ this.options[key] = value; @@ -20,19 +51,20 @@ $.widget("ui.notify", { // instance constructor $.extend($.ui.notify, { instance: function(widget){ - this.widget = widget; + this.parent = widget; this.isOpen = false; } }); // instance methods $.extend($.ui.notify.instance.prototype, { - _create: function(params, options){ + _create: function(params, options, template){ this.options = options; + var self = this, // build html template - html = this.widget.template.replace(/#\{(.*?)\}/g, function($1, $2){ + html = template.replace(/#\{(.*?)\}/g, function($1, $2){ return ($2 in params) ? params[$2] : ''; }), @@ -88,14 +120,17 @@ $.extend($.ui.notify.instance.prototype, { var self = this; this.isOpen = true; - this.element.appendTo(this.widget.element).css({ display:"none", opacity:"" }).fadeIn(this.options.speed, function(){ + this.element.appendTo(this.parent.element).css({ display:"none", opacity:"" }).fadeIn(this.options.speed, function(){ self._trigger("open"); }); return this; }, + widget: function(){ + return this.element; + }, _trigger: function(type, e, instance){ - return this.widget._trigger.call( this, type, e, instance ); + return this.parent._trigger.call( this, type, e, instance ); } }); diff --git a/ui.notify.css b/ui.notify.css index 2248fff..0c10cec 100644 --- a/ui.notify.css +++ b/ui.notify.css @@ -1,6 +1,5 @@ .ui-notify { width:350px; position:absolute; top:10px; right:10px; } -.ui-notify-padding { padding:10px } -.ui-notify-message { margin-bottom:15px; background:#000; background:rgba(0,0,0,0.8); -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; box-shadow: 0 0 6px #000; } +.ui-notify-message { padding:10px; margin-bottom:15px; background:#000; background:rgba(0,0,0,0.8); -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; box-shadow: 0 0 6px #000; } .ui-notify-message:last-child { margin-bottom:0 } .ui-notify-message h1 { color:#fff; font-size:14px; font-weight:bold; margin:0; padding:0 } .ui-notify-message p { color:#fff; margin:3px 0; padding:0; line-height:18px }