Small Animated jQuery Android Like Toast Plugin Notice - Download Small Animated jQuery Android-Like Toast Plugin - Notice

Download Small Animated jQuery Android-Like Toast Plugin – Notice

By Posted on

This time I will share jQuery Plugin and tutorial about Small Animated jQuery Android-Like Toast Plugin – Notice, hope it will help you in programming stack.

Small Animated jQuery Android Like Toast Plugin Notice - Download Small Animated jQuery Android-Like Toast Plugin - Notice

File Size: 20.2 KB
Views Total: 1683
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Notice is a tiny jQuery notification plugin used to add Android-like animated toast messages anywhere on your webpage/web application. Currently support 4 types of notification: into, success, warning and error. You can easily and quickly extend the plugin to add more notification types in Javascript.

How to use it:

1. Load jQuery library and the jQuery notice plugin at the end of the document.

view source
1 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
2 <script src="dist/notice.js"></script>

2. Create a basic toast with one line of Javascript.

view source
1 // $.notice(MESSAGE,OPTIONS);
2  
3 $.notice('Your message goes here', {
4  
5 // plugin options
6  
7 });

3. All the options. You can also pass these options via Html5 data-* attributes defined in trigger elements.

view source
01 $.notice('Your message goes here', {
02  
03 //container to append your notifications to
04 container: 'body',
05  
06 //height of your notifications
07 height: 30,
08  
09 //timeout before auto closing, set to false to disable auto close
10 timeout: 5000,
11  
12 // custom the styles of your notifications
13 level: 'info',
14 offsetTop: 0,
15 offset: 0,
16 anchor: 'top',
17 zIndex: 1000,
18 showClose: false,
19 borderRadius: '10px',
20 padding: '10px 20px 10px 20px',
21 levels: {
22   info: {
23     background: '#333',
24     foreground: '#fff'
25   },
26   success: {
27     background: '#dff0d8',
28     foreground: '#3d6c2a'
29   },
30   warning: {
31     background: '#f9fad2',
32     foreground: '#888b0f'
33   },
34   error: {
35     background: '#f2dede',
36     foreground: '#712d2d'
37   }
38   // add your own styles here
39 }
40  
41 });

Change log:

2017-09-01

  • bugfix

This awesome jQuery plugin is developed by firstandthird. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: