[ADD] Added jquery ui notify plugin
bzr revid: fme@openerp.com-20110405154650-pkcpxj3pn6q3r7cv
This commit is contained in:
Fabien Meghazi
parent
c8f4cee551
commit
5e66c0ea4d
|
|
@ -0,0 +1,13 @@
|
|||
.ui-notify { width:350px; position:fixed; top:10px; right:10px; }
|
||||
.ui-notify-message { padding:10px; margin-bottom:15px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px }
|
||||
.ui-notify-message h1 { font-size:14px; margin:0; padding:0 }
|
||||
.ui-notify-message p { margin:3px 0; padding:0; line-height:18px }
|
||||
.ui-notify-message:last-child { margin-bottom:0 }
|
||||
.ui-notify-message-style { background:#000; background:rgba(0,0,0,0.8); -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; box-shadow: 0 0 6px #000; }
|
||||
.ui-notify-message-style h1 { color:#fff; font-weight:bold }
|
||||
.ui-notify-message-style p { color:#fff }
|
||||
.ui-notify-close { color:#fff; text-decoration:underline }
|
||||
.ui-notify-click { cursor:pointer }
|
||||
.ui-notify-cross { margin-top:-4px; float:right; cursor:pointer; text-decoration:none; font-size:12px; font-weight:bold; text-shadow:0 1px 1px #fff; padding:2px }
|
||||
.ui-notify-cross:hover { color:#ffffab }
|
||||
.ui-notify-cross:active { position:relative; top:1px }
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
/*
|
||||
* jQuery Notify UI Widget 1.4
|
||||
* 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 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("ech.notify", {
|
||||
options: {
|
||||
speed: 500,
|
||||
expires: 5000,
|
||||
stack: 'below',
|
||||
custom: false
|
||||
},
|
||||
_create: function(){
|
||||
var self = this;
|
||||
this.templates = {};
|
||||
this.keys = [];
|
||||
|
||||
// build and save templates
|
||||
this.element.addClass("ui-notify").children().addClass("ui-notify-message ui-notify-message-style").each(function(i){
|
||||
var key = this.id || i;
|
||||
self.keys.push(key);
|
||||
self.templates[key] = $(this).removeAttr("id").wrap("<div></div>").parent().html(); // because $(this).andSelf().html() no workie
|
||||
}).end().empty().show();
|
||||
},
|
||||
create: function(template, msg, opts){
|
||||
if(typeof template === "object"){
|
||||
opts = msg;
|
||||
msg = template;
|
||||
template = null;
|
||||
}
|
||||
|
||||
var tpl = this.templates[ template || this.keys[0]];
|
||||
|
||||
// remove default styling class if rolling w/ custom classes
|
||||
if(opts && opts.custom){
|
||||
tpl = $(tpl).removeClass("ui-notify-message-style").wrap("<div></div>").parent().html();
|
||||
}
|
||||
|
||||
// return a new notification instance
|
||||
return new $.ech.notify.instance(this)._create(msg, $.extend({}, this.options, opts), tpl);
|
||||
}
|
||||
});
|
||||
|
||||
// instance constructor
|
||||
$.extend($.ech.notify, {
|
||||
instance: function(widget){
|
||||
this.parent = widget;
|
||||
this.isOpen = false;
|
||||
}
|
||||
});
|
||||
|
||||
// instance methods
|
||||
$.extend($.ech.notify.instance.prototype, {
|
||||
_create: function(params, options, template){
|
||||
this.options = options;
|
||||
|
||||
var self = this,
|
||||
|
||||
// build html template
|
||||
html = template.replace(/#(?:\{|%7B)(.*?)(?:\}|%7D)/g, function($1, $2){
|
||||
return ($2 in params) ? params[$2] : '';
|
||||
}),
|
||||
|
||||
// the actual message
|
||||
m = (this.element = $(html)),
|
||||
|
||||
// close link
|
||||
closelink = m.find(".ui-notify-close");
|
||||
|
||||
// clickable?
|
||||
if(typeof this.options.click === "function"){
|
||||
m.addClass("ui-notify-click").bind("click", function(e){
|
||||
self._trigger("click", e, self);
|
||||
});
|
||||
}
|
||||
|
||||
// show close link?
|
||||
if(closelink.length){
|
||||
closelink.bind("click", function(){
|
||||
self.close();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
this.open();
|
||||
|
||||
// auto expire?
|
||||
if(typeof options.expires === "number"){
|
||||
window.setTimeout(function(){
|
||||
self.close();
|
||||
}, options.expires);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
close: function(){
|
||||
var self = this, speed = this.options.speed;
|
||||
|
||||
this.element.fadeTo(speed, 0).slideUp(speed, function(){
|
||||
self._trigger("close");
|
||||
self.isOpen = false;
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
open: function(){
|
||||
if(this.isOpen || this._trigger("beforeopen") === false){
|
||||
return this;
|
||||
}
|
||||
|
||||
var self = this;
|
||||
|
||||
this.element[this.options.stack === 'above' ? 'prependTo' : 'appendTo'](this.parent.element).css({ display:"none", opacity:"" }).fadeIn(this.options.speed, function(){
|
||||
self._trigger("open");
|
||||
self.isOpen = true;
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
widget: function(){
|
||||
return this.element;
|
||||
},
|
||||
_trigger: function(type, e, instance){
|
||||
return this.parent._trigger.call( this, type, e, instance );
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue