Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

better codes, better docs

  • Loading branch information...
commit 5a1d7b16db2ac714f7fa99ff9e281697113bb2e8 1 parent 0caeb25
Eric Hynds authored
51 README.markdown
View
@@ -1,14 +1,16 @@
# jQuery UI Notify Widget
-Create Growl/Ubuntu-like notifications. Uses RGBA, border-radius, and box-shadow, so they're not as pretty in IE as they could be right now.
+Create Growl/Ubuntu-like notifications.
+
+Uses RGBA, border-radius, and box-shadow, so they're not as pretty as they could be in IE at the moment.
## Features
- No images, all CSS
-- Less than 100 lines of code
-- Built on jQuery UI widget factory
+- Roughly 100 lines of code
+- Built on top of the jQuery UI widget factory
- Templating system: include whatever you want inside notifications (images, links, etc.)
-- beforeopen, open, and close callbacks
+- beforeopen, open, close, and click events
- Show completely different notifications in different containers
- Ability to customize options on a notification-by-notification basis
- Ability to programatically call `open` and `close` methods
@@ -86,3 +88,44 @@ instance.close();
instance.open();
</pre>
+## Options
+
+Two options are available:
+
+### speed
+The amount of time in MS to fade in/out notifications.
+
+### expires
+The notification will automatically close after this amount of time, in MS. Set to `0` or `false` to create "sticky" notifications.
+
+## Events
+
+Four events are available to you:
+
+### beforeopen
+Fires before the notification opens. If `false` is returned inside this callback, the notification will not open.
+
+### open
+Fires after the notifcation opens.
+
+### close
+Fires after the notification closes.
+
+### click
+Fires if the user clicks anywhere in the notification itself (not on the close link(s), if present). Useful
+if you want to close the notification or perform some other action once the user has acknowledged the notice.
+
+An example here:
+
+ $("#container").notify("create", {
+ title: 'Clickable Notification',
+ text: 'Click on me to fire a callback'
+ },{
+ click: function(e,instance){
+ // close the notice if the user clicks anywhere inside it
+ instance.close();
+ }
+ });
+
+
+
BIN  alert.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
69 index.htm
View
@@ -6,34 +6,61 @@
<link type="text/css" rel="stylesheet" href="http://www.erichynds.com/examples/style.css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="ui.notify.css" />
+<style type="text/css">form input { display:block; width:250px; margin-bottom:5px }</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js" type="text/javascript"></script>
-<script src="http://jqueryui.com/themeroller/themeswitchertool/" type="text/javascript"></script>
<script src="src/jquery.notify.js" type="text/javascript"></script>
<script type="text/javascript">
-$(function(){
+// create a test notification
+function basic(){
+ $container.notify("create", {
+ title: 'Default Notification',
+ text: 'This is an example of the default config. I will disappear up after five seconds.'
+ });
+}
+
+function sticky(){
+ $container.notify("create", {
+ title: 'Sticky Notification',
+ text: 'This is an example of a "sticky" notification. The only way to close me is to click on the X above.'
+ },{ expires:false });
+}
+
+function warning(){
+ $container.notify("create", {
+ title: 'Warning!',
+ text: 'OMG the quick brown fox jumped over the lazy dog. You\'ve been warned. <a href="#" class="ui-notify-close">Close me.</a>',
+ icon: '<img src="alert.png" style="margin:0 10px 0 0" />'
+ },{ expires:false });
+}
+
+function clickable(){
+ $container.notify("create", {
+ title: 'Clickable Notification',
+ text: 'Click on me to fire a callback. Do it quick though because I will fade out after 5 seconds.'
+ }, {
+ click: function(e,instance){
+ alert("Click triggered!\n\nTwo options are passed into the click callback: the original event obj and the instance object.");
+ }
+ });
+}
+$(function(){
// initialize widget on a container, passing in all the defaults.
// the defaults will apply to any notification created within this
// container, but can be overwritten on notification-by-notification
// basis.
$container = $("#container").notify();
- // create a test notification
- $container.notify("create", {
- title: 'Test Notification',
- text: 'This is an example of the default config, and will slide up after five seconds.'
- });
-
- // create another, and save the obj into the var instance.
- instance = $container.notify("create", {
- title: 'Sticky Notification',
- text: 'This is an example of a "sticky" notification. The only way to close me is to click on the X above.'
- },{
- expires:false
- });
+ // create two when the pg loads
+ basic();
+ sticky();
- // since the above instance is "sticky", it can be manually closed by calling instance.close();
+ // bindings
+ $("#default").click( basic );
+ $("#sticky").click( sticky );
+ $("#warning").click( warning );
+ $("#clickable").click( clickable );
});
</script>
@@ -46,10 +73,18 @@
<p>This is a growl/ubuntu-like notification system built on top of jQuery UI.</p>
<p>Download &amp; docs @ <a href="http://github.com/ehynds/jquery-notify">http://github.com/ehynds/jquery-notify</a>.</p>
+ <form style="margin:20px 0">
+ <input type="button" id="default" value="Open with default configuration" />
+ <input type="button" id="sticky" value="Create a &quot;sticky&quot; notification" />
+ <input type="button" id="warning" value="A more custom template" />
+ <input type="button" id="clickable" value="The entire notification can be clicked on" />
+ </form>
+
<!--- container to hold notifications --->
<div id="container">
<div>
- <a class="ui-notify-close" href="#">x</a>
+ <div class="icon" style="float:left">#{icon}</div>
+ <a class="ui-notify-close ui-notify-cross" href="#">x</a>
<h1>#{title}</h1>
<p>#{text}</p>
</div>
12 src/jquery.notify.js
View
@@ -29,7 +29,6 @@ $.extend($.ui.notify, {
$.extend($.ui.notify.instance.prototype, {
_create: function(params, options){
this.options = options;
-
var self = this,
// build html template
@@ -38,7 +37,9 @@ $.extend($.ui.notify.instance.prototype, {
}),
// the actual message
- m = (this.element = $(html)),
+ m = (this.element = $(html).bind("click", function(e){
+ self._trigger("click", e, self);
+ })),
// close link
closelink = m.find("a.ui-notify-close");
@@ -58,11 +59,10 @@ $.extend($.ui.notify.instance.prototype, {
});
}
- // open plz
this.open();
// auto expire?
- if(typeof this.options.expires === "number"){
+ if(typeof options.expires === "number"){
window.setTimeout(function(){
self.close();
}, options.expires);
@@ -94,8 +94,8 @@ $.extend($.ui.notify.instance.prototype, {
return this;
},
- _trigger: function(type){
- return this.widget._trigger.call( this, type );
+ _trigger: function(type, e, instance){
+ return this.widget._trigger.call( this, type, e, instance );
}
});
10 ui.notify.css
View
@@ -2,10 +2,12 @@
.ui-notify-padding { padding:10px }
.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:5px 0; padding:0; line-height:18px }
-.ui-notify-close { margin-top:-4px; float:right; color:#fff; cursor:pointer; font-size:12px; font-weight:bold; text-shadow:0 1px 1px #fff; padding:2px }
-.ui-notify-close:hover { text-decoration:none; color:#ffffab }
-.ui-notify-close:active { position:relative; top:1px }
+.ui-notify-message p { color:#fff; margin:3px 0; padding:0; line-height:18px }
+.ui-notify-close { color:#fff; text-decoration:underline }
+.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 }
+
.ui-notify-message {
margin-bottom:15px;
Please sign in to comment.
Something went wrong with that request. Please try again.