Simple Customizable jQuery Notification Plugin - Not1f1cat1ons
| File Size: | 6.37 KB |
|---|---|
| Views Total: | 279 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Not1f1cat1ons is a minimal jQuery-dependent notification library that helps you create notifications of various types sliding out from the edge of the screen when triggered. No CSS required. Highly customizable via JavaScript.
Basic usage:
1. Load the latest version of jQuery library and the jQuery Not1f1cat1ons plugin in the html file.
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script> <script src="not1f1cat1ons-0.1.js"></script>
2. Create a DIV container for the notification bars.
<div class="notify-container"></div>
3. Create a new Not1f1cat1ons object and specify the target container in which you want to place the notifications.
var myNotify = new Not1f1cat1ons("notify-container");
4. Show notifications with custom content & types using triggerNotification() as follows.
notify1.triggerNotification("success", "Success message");
notify1.triggerNotification("warning", "Warning message");
notify1.triggerNotification("alert", "Alert message");
notify1.triggerNotification("info", "Info message");
5. Config the notification bars by passing the following parameters to the Not1f1cat1ons().
// Not1f1cat1ons(element_class_name, animation, hidden_position, visible_position, default_style, success_style, alert_style, warning_style)
var animation = {
show_duration: 1000,
visible_duration: 4000,
hide_duration: 500,
direction: "left"
};
var hidden_position = {
"position": "absolute",
"top": "500px",
"left": "-302px"
};
var visible_position = {
"position": "absolute",
"top": "500px",
"left": "-2px"
};
var default_style = {
"border": "none",
"box-shadow": "grey"
};
var success_style = {
"background-color": "black",
"font-size": "1.5em"
};
var alert_style = {
"background-color": "grey",
"font-size": "1em"
};
var warning_style = {
"background-color": "orange",
"font-size": "0.5em"
};
var info_style = {
"background-color": "yellow",
"font-size": "1.1em"
};
This awesome jQuery plugin is developed by Hermi999. For more Advanced Usages, please check the demo page or visit the official website.











