463 lines
21 KiB
HTML
463 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Notify.js</title>
|
|
<meta name="description" content="Notify.js - A simple, versatile notification library">
|
|
<meta name="author" content="Jaime Pillora <dev@jpillora.com>">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<link rel="stylesheet" href="docs/css/app.css">
|
|
<link href="http://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,700,800" rel="stylesheet" type="text/css">
|
|
<!--if lt IE 9
|
|
script(src='http://html5shim.googlecode.com/svn/trunk/html5.js')
|
|
|
|
-->
|
|
</head>
|
|
<body><a href="https://github.com/jpillora/notifyjs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
|
|
<div class="main container">
|
|
<div class="eight columns">
|
|
<h1 class="title">Notify.js</h1>
|
|
</div>
|
|
<div class="eight columns right"><span>
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=jpillora&type=follow" allowtransparency="true" frameborder="0" scrolling="0" width="130" height="20"></iframe></span><span>
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=jpillora&repo=notifyjs&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="80" height="20"></iframe></span><span><a href="https://twitter.com/share" data-url="http://notifyjs.com" data-text="Notify.js - A simple, versatile notification library" data-hashtags="notifyjs" class="twitter-share-button">Tweet</a>
|
|
<script>
|
|
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
|
|
|
</script></span></div>
|
|
<hr>
|
|
<div class="eight columns summary">
|
|
<h3>Summary</h3>
|
|
<p>
|
|
Notify.js is a jQuery plugin to provide simple yet fully customisable notifications.
|
|
The javascript code snippets in this documentation with the <code>green</code> edge are runnable by clicking them.
|
|
</p>
|
|
<p>
|
|
<pre class="prettyprint runnable">$.notify("Hello World");</pre>
|
|
</p><img src="docs/img/pointer.png" class="demo-mouse">
|
|
</div>
|
|
<div class="eight columns">
|
|
<h3>Download</h3>
|
|
<p>Download pre-packaged with the bootstrap notification style:<br><a href="dist/notify-combined.min.js" data-download data-name="notify.min">
|
|
<button>Download notify.min.js</button></a><a href="dist/notify-combined.js" data-download data-name="notify">
|
|
<button>Download notify.js</button></a></p>
|
|
<p>Or, create a custom build with a different style<br>
|
|
<button disabled="disabled" class="build-tool-loading">Loading...</button>
|
|
<button class="build-tool-toggle">Build a custom notify.js</button>
|
|
</p>
|
|
</div>
|
|
<div ng-app ng-controller="BuildController" class="sixteen columns build-tool">
|
|
<p class="center">Notify.js Core
|
|
<button disabled="disabled" class="active">Include</button>
|
|
</p>
|
|
<hr>
|
|
<p><span class="bold">Styles </span><br>
|
|
<div ng-repeat="style in styles" class="build-tool-style">
|
|
<div>
|
|
<textarea ng-model="style.code" class="code"></textarea>
|
|
</div>
|
|
<div class="right">
|
|
<button ng-click="active(style,'active')" ng-class="style.active && 'active'">Include</button>
|
|
<button ng-click="useDefault(style)" ng-class="settings.default == style && 'active'">Default</button>
|
|
<button ng-click="test($event,style,false)" class="test">Test Element</button>
|
|
<button ng-click="test($event,style,true)" class="test">Test Global</button>
|
|
<button ng-click="delete($index)">Delete</button>
|
|
</div>
|
|
</div>
|
|
<div class="build-tool-controls center">
|
|
<button ng-click="addStyle()">Add Style</button>
|
|
<select ng-options="p.name for p in premadeStyles" ng-model="premadeStyle"></select>
|
|
<button ng-click="loadStyle()">Load Style</button><span class="italic">Contribute more styles !</span>
|
|
</div>
|
|
</p>
|
|
<hr>
|
|
<p class="center">Minify
|
|
<button ng-click="active(settings,'minify')" ng-class="settings.minify && 'active'">Minify this build</button>
|
|
</p>
|
|
<hr>
|
|
<p class="center">
|
|
<button ng-click="build()" ng-bind="building && 'Building...' || 'Download this build'"></button><span class="italic indent2">Made with <a href="https://github.com/jpillora/compilejs" target="_blank">Compile.js</a></span>
|
|
</p>
|
|
</div>
|
|
<div class="sixteen columns">
|
|
<h3>Basic Usage</h3>
|
|
</div>
|
|
<div class="eight columns">
|
|
<h4>Element Notifications</h4>
|
|
<p>You can place notifications on any element:</p>
|
|
<p>
|
|
<pre class="prettyprint runnable">$(".elem-demo").notify("Hello Box");</pre>
|
|
</p>
|
|
<p class="center">Like this <span class="box elem-demo">box</span></p>
|
|
</div>
|
|
<div class="eight columns">
|
|
<h4>Global Notifications</h4>
|
|
<p>
|
|
If you don't specify an element, notification
|
|
will appear in the top left (unless you specify a
|
|
different position - See <a data-highlight>Positioning</a>)
|
|
</p>
|
|
<p>
|
|
<pre class="prettyprint runnable">$.notify("I'm over here !");</pre>
|
|
</p>
|
|
</div>
|
|
<div class="sixteen columns">
|
|
<h4>Notification Styles</h4>
|
|
<p>
|
|
Each style may define a set of classes to use to substyle the notification.
|
|
The pre-packaged version includes a bootstrap notification style (see more below in Styling).
|
|
These classes include:
|
|
|
|
</p>
|
|
<div><span>Success</span>
|
|
<pre class="prettyprint runnable indent1">$.notify("Access granted", "success");</pre><span>Info</span>
|
|
<pre class="prettyprint runnable indent1">$.notify("Do not press this button", "info");</pre><span>Warning</span>
|
|
<pre class="prettyprint runnable indent1">$.notify("Warning: Self-destruct in 3.. 2..", "warn");</pre><span>Error</span>
|
|
<pre class="prettyprint runnable indent1">$.notify("BOOM!", "error");</pre>
|
|
</div>
|
|
<p style="margin-top:10px" class="italic">Note: This page has set the default class to<code>"success"</code> with<code>$.notify.defaults({ className: "success" });</code>.</p>
|
|
</div>
|
|
<div id="position" class="sixteen columns">
|
|
<h3>Positioning</h3>
|
|
<p>
|
|
Element notifications and Global notifications can
|
|
be vertically repositioned to: <code>"top"</code>, <code>"middle" </code>or <code>"bottom" </code>and horozontally repositioned to: <code>"left"</code>, <code>"center" </code>or <code>"right" </code>.
|
|
</p>
|
|
<p>
|
|
<pre class="prettyprint runnable">$(".pos-demo").notify(
|
|
"I'm left of the box",
|
|
{ position:"left" }
|
|
);</pre>
|
|
</p>
|
|
<p class="center">We can position the notification around this <span class="box pos-demo">box</span></p>
|
|
<p style="padding-top: 30px">Use this positioning tool to see all possible position combinations </p>
|
|
<div style="padding: 30px;">
|
|
<label for="pos-elem" class="inline">Element</label>
|
|
<input type="radio" id="pos-elem" value="elem" name="pos-type" checked="checked">
|
|
<label for="pos-glob" class="inline">Global</label>
|
|
<input type="radio" id="pos-glob" value="glob" name="pos-type">
|
|
</div>
|
|
<div style="margin-left: 60px">
|
|
<input data-thickness=".3" data-width="100" data-height="100" data-max="12" data-cursor="true" data-fgColor="#080" data-displayInput="false" data-angleOffset="-15" data-linecap="round" class="pos-chooser">
|
|
</div>
|
|
<p class="center"><span>An awesome cool </span><span class="box pos-chooser-demo">larrrggggeeee box</span></p>
|
|
</div>
|
|
<div class="sixteen columns">
|
|
<h3>API</h3>
|
|
<div class="entry">
|
|
<h5><code class="black">$.notify( </code><code>string|object</code><code class="black">, [ </code><code>options</code><code class="black"> ])</code></h5>
|
|
<p class="indent1"><code>string|object</code> - global notification data<br><code>options</code> - an options object or class name string </p>
|
|
</div>
|
|
<div class="entry">
|
|
<h5><code class="black">$.notify( </code><code>element</code><code class="black">, </code><code>string|object</code><code class="black">, [ </code><code>options</code><code class="black"> ])</code></h5>
|
|
<p class="indent1"><code>element</code> - a jquery element<br><code>string|object</code> - element notification data<br><code>options</code> - an options object or class name string </p>
|
|
</div>
|
|
<div class="entry">
|
|
<h5><code class="black">$( </code><code>selector</code><code class="black"> ).notify( </code><code>string|object</code><code class="black">, [ </code><code>options</code><code class="black"> ])</code></h5>
|
|
<p class="indent1"><code>selector</code> - jquery selector<br><code>string|object</code> - element notification data<br><code>options</code> - an options object or class name string </p>
|
|
</div>
|
|
<div class="entry">
|
|
<h5><code class="black">$.notify.addStyle( </code><code>styleName</code><code class="black">, </code><code>styleDefinition</code><code class="black"> )</code></h5>
|
|
<p class="indent1"><code>styleName</code> - string (the <b>style</b> option references this name)<br> <code>styleDefinition</code> - style definition object (see <b>Styling</b> below)</p>
|
|
</div>
|
|
<div class="entry">
|
|
<h5><code class="black">$.notify.defaults( </code><code>options</code><code class="black"> )</code></h5>
|
|
<p class="indent1"><code>options</code> - an options object (updates the defaults listed below) </p>
|
|
</div>
|
|
</div>
|
|
<div class="sixteen columns">
|
|
<h3>Options</h3>
|
|
<p>
|
|
The options object listed above are in the form below.
|
|
This object below is the actual used to check option
|
|
validity and set defaults.
|
|
</p>
|
|
<pre class="prettyprint">{
|
|
// whether to hide the notification on click
|
|
clickToHide: true,
|
|
// whether to auto-hide the notification
|
|
autoHide: true,
|
|
// if autoHide, hide after milliseconds
|
|
autoHideDelay: 5000,
|
|
// show the arrow pointing at the element
|
|
arrowShow: true,
|
|
// arrow size in pixels
|
|
arrowSize: 5,
|
|
// default positions
|
|
elementPosition: 'bottom left',
|
|
globalPosition: 'top right',
|
|
// default style
|
|
style: 'bootstrap',
|
|
// default class (string or [string])
|
|
className: 'error',
|
|
// show animation
|
|
showAnimation: 'slideDown',
|
|
// show animation duration
|
|
showDuration: 400,
|
|
// hide animation
|
|
hideAnimation: 'slideUp',
|
|
// hide animation duration
|
|
hideDuration: 200,
|
|
// padding between element and notification
|
|
gap: 2
|
|
}
|
|
</pre>
|
|
</div>
|
|
<div class="sixteen columns">
|
|
<div class="section">
|
|
<h3>Custom Styling Guide</h3>
|
|
<p>You can add your own styles to Notify.js with the<code>$.notify.addStyle </code>method. See <a data-highlight>API</a>.</p>
|
|
<p>Style definition objects are in the form:</p>
|
|
<pre class="prettyprint">{
|
|
//required html representing each notification
|
|
html: "",
|
|
//optional object to be converted to css
|
|
classes: {
|
|
<className>: {
|
|
<propertyName>: <value>
|
|
},
|
|
<className>: {
|
|
...
|
|
},
|
|
...
|
|
},
|
|
//optional css to be inserted onto the page
|
|
css: ""
|
|
}
|
|
</pre>
|
|
<p>
|
|
<h5 class="inline">html</h5> - If you only have HTML element that you need to modify per
|
|
notification then you should give this element an attribute of <code>data-notify-text</code> or <code>data-notify-html</code>. Use <code>data-notify-html</code> if you wish to display arbitrary HTML inside the notification,
|
|
otherwise, use <code>data-notify-text</code> as it is more secure.<br> Otherwise, if you wish to modify multiple HTML elements per
|
|
notification then you'll need to give each element one of the two
|
|
attributes above <b>as well as a value</b>. For an example of this see the Advanced Example below.
|
|
</p>
|
|
<p>
|
|
<h5 class="inline">classes</h5> - This object will be used to construct css. It must be in the form described above and there is an example below.
|
|
</p>
|
|
<p>
|
|
<h5 class="inline">css</h5> - This string is simply raw css. Use this property if you want to keep your style definition inside
|
|
your js files.
|
|
</p>
|
|
</div>
|
|
<div class="section">
|
|
<h4>Class naming convention</h4>
|
|
<p>
|
|
When each notification is constructed, it's container
|
|
(outer most element defined in your style html) will automatically
|
|
apply the class:
|
|
</p>
|
|
<p><code>notifyjs-<style name>-base</code></p>
|
|
<p>When you use the class name option (<code>className</code>) the class:</p>
|
|
<p><code>notifyjs-<style name>-<class name></code></p>
|
|
<p>
|
|
will be applied. So if you define your styles in an external CSS file or in the style's css
|
|
property, you must define your CSS rules using this naming convention.
|
|
|
|
</p>
|
|
</div>
|
|
<div class="section">
|
|
<h4>Simple Example</h4>
|
|
<p>If you were to define the style:</p>
|
|
<pre class="prettyprint auto-run happyblue-example">$.notify.addStyle('happyblue', {
|
|
html: "<div>☺<span data-notify-text/>☺</div>",
|
|
classes: {
|
|
base: {
|
|
"white-space": "nowrap",
|
|
"background-color": "lightblue",
|
|
"padding": "5px"
|
|
},
|
|
superblue: {
|
|
"color": "white",
|
|
"background-color": "blue"
|
|
}
|
|
}
|
|
});
|
|
</pre>
|
|
<p>Upon running this code, the <code>classes</code> object in this example will be converted the following css:</p>
|
|
<pre class="prettyprint lang-css">.notifyjs-happyblue-base {
|
|
white-space: nowrap;
|
|
background-color: lightblue;
|
|
padding: 5px;
|
|
}
|
|
.notifyjs-happyblue-superblue {
|
|
color: white;
|
|
background-color: blue;
|
|
}</pre>
|
|
<p:i>You can confirm this now by inspecting the DOM (look for the tagged style element in the head)</p:i>
|
|
<p>You can now use your new style with:</p>
|
|
<pre class="prettyprint runnable">$.notify('hello !!', {
|
|
style: 'happyblue'
|
|
});
|
|
</pre>
|
|
<p>and you can use the <code>superblue</code> class with:</p>
|
|
<pre class="prettyprint runnable">$.notify('HELLO !!!!', {
|
|
style: 'happyblue',
|
|
className: 'superblue'
|
|
});
|
|
</pre>
|
|
</div>
|
|
<div class="section">
|
|
<h4>Advanced Example</h4>
|
|
<p>Say you wanted to use buttons in your notifications then you could do something like:</p>
|
|
<pre class="prettyprint auto-run button-js-example">//add a new style 'foo'
|
|
$.notify.addStyle('foo', {
|
|
html:
|
|
"<div>" +
|
|
"<div class='clearfix'>" +
|
|
"<div class='title' data-notify-html='title'/>" +
|
|
"<div class='buttons'>" +
|
|
"<button class='no'>Cancel</button>" +
|
|
"<button class='yes' data-notify-text='button'></button>" +
|
|
"</div>" +
|
|
"</div>" +
|
|
"</div>"
|
|
});
|
|
|
|
//listen for click events from this style
|
|
$(document).on('click', '.notifyjs-foo-base .no', function() {
|
|
//programmatically trigger propogating hide event
|
|
$(this).trigger('notify-hide');
|
|
});
|
|
$(document).on('click', '.notifyjs-foo-base .yes', function() {
|
|
//show button text
|
|
alert($(this).text() + " clicked!");
|
|
//hide notification
|
|
$(this).trigger('notify-hide');
|
|
});
|
|
</pre>
|
|
<p>Notice there is no <code>classes</code> property defined above. Since the CSS in this example is non-trivial, we'll use an exteral CSS file instead:</p>
|
|
<p class="italic">Note: you could also convert this CSS code to a JavaScript string and use it with the <code>css</code> property. It's not very readable though it's better for distribution.</p>
|
|
<pre class="prettyprint auto-add foo-css-example lang-css">.notifyjs-foo-base {
|
|
opacity: 0.85;
|
|
width: 200px;
|
|
background: #F5F5F5;
|
|
padding: 5px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.notifyjs-foo-base .title {
|
|
width: 100px;
|
|
float: left;
|
|
margin: 10px 0 0 10px;
|
|
text-align: right;
|
|
}
|
|
|
|
.notifyjs-foo-base .buttons {
|
|
width: 70px;
|
|
float: right;
|
|
font-size: 9px;
|
|
padding: 5px;
|
|
margin: 2px;
|
|
}
|
|
|
|
.notifyjs-foo-base button {
|
|
font-size: 9px;
|
|
padding: 5px;
|
|
margin: 2px;
|
|
width: 60px;
|
|
}
|
|
</pre>
|
|
<p>You can now use this style with:</p>
|
|
<pre class="prettyprint runnable">$.notify({
|
|
title: 'Would you like some Foo ?',
|
|
button: 'Confirm'
|
|
}, {
|
|
style: 'foo',
|
|
autoHide: false,
|
|
clickToHide: false
|
|
});
|
|
</pre>
|
|
</div>
|
|
<div class="section">
|
|
<h4>Extra Example</h4>
|
|
<p>
|
|
If using the above methods still don't provide you
|
|
with what you need then you can, pass jQuery objects
|
|
straight into the notification (provided that the
|
|
element has the <code>data-notify-html</code> attribute):
|
|
|
|
</p>
|
|
<pre class="prettyprint runnable">var h5 = $("<h5/>").append("You MUST have some Foo !")
|
|
|
|
$.notify({
|
|
title: h5,
|
|
button: 'YES !'
|
|
}, {
|
|
style: 'foo',
|
|
autoHide: false,
|
|
clickToHide: false
|
|
});
|
|
</pre>
|
|
</div>
|
|
<div class="section">
|
|
<h4>Style List</h4>
|
|
<p>
|
|
<ul class="square">
|
|
<li><a href="https://github.com/jpillora/notifyjs/tree/gh-pages/dist/styles/bootstrap" target="_blank">bootstrap</a></li>
|
|
</ul>
|
|
<ul class="square">
|
|
<li><a href="https://github.com/jpillora/notifyjs/tree/gh-pages/dist/styles/metro" target="_blank">metro</a></li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="sixteen columns">
|
|
<h3>Contributing More Styles </h3>
|
|
<p>Contributing more styles is easy!
|
|
<ol>
|
|
<li>Click <a href="https://github.com/jpillora/notifyjs/new/gh-pages/src/styles" target="_blank">this</a> link</li>
|
|
<li>Sign into GitHub (if you're not already)</li>
|
|
<li>Click 'Fork'</li>
|
|
<li>Enter your new style</li>
|
|
<li>Click 'Commit New File'</li>
|
|
<li>Click 'Send Pull Request'!</li>
|
|
</ol>
|
|
</p>
|
|
<p>To get people started with some styles ideas, checkout this <a href="http://mac.appstorm.net/roundups/utilities-roundups/36-sweet-growl-styles-to-keep-your-notifications-snappy/" target="_blank">post on various Growl styles</a>.</p>
|
|
<p class="italic">
|
|
Note: If you wish to contribute to the library by fixing bugs or adding features,
|
|
see the <b>src</b> folder. Also, the source is in CoffeeScript, however, new styles can be either JavaScript or CoffeeScript.
|
|
I'm using <a href="https://gruntjs.com" target="_blank">Grunt </a> to compile, minify and concat the builds, you can do so with:
|
|
<ol>
|
|
<li>Fork <a href="https://github.com/jpillora/notifyjs">https://github.com/jpillora/notifyjs</a></li>
|
|
<li><code>cd notifyjs</code></li>
|
|
<li><code>npm install -g grunt-cli</code></li>
|
|
<li><code>npm install</code></li>
|
|
<li><code>grunt</code></li>
|
|
<li>Pull-request ! </li>
|
|
</ol>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
|
|
<script src="dist/notify.js"></script>
|
|
<script src="dist/styles/bootstrap/notify-bootstrap.js"></script>
|
|
<script src="docs/js/app.js"></script>
|
|
<script defered src="http://jpillora.com/compilejs/dist/compile.js"></script>
|
|
<script defered src="http://jpillora.com/compilejs/dist/tasks/compile.uglify.js"></script>
|
|
<script defered src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
|
|
<script>
|
|
//async fonts
|
|
WebFontConfig = { google: { families: [ 'Droid+Sans+Mono::latin' ] } };
|
|
(function() {
|
|
var wf = document.createElement('script');
|
|
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
|
|
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
|
|
wf.type = 'text/javascript';
|
|
wf.async = 'true';
|
|
var s = document.getElementsByTagName('script')[0];
|
|
s.parentNode.insertBefore(wf, s);
|
|
})();
|
|
//ga
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-38709761-6', 'notifyjs.com');
|
|
ga('send', 'pageview');
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |