Simple Customizable jQuery Notification Plugin - Not1f1cat1ons
File Size: | 6.37 KB |
---|---|
Views Total: | 274 |
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.