Lightweight Themable Notification Plugin For jQuery - Noticejs
File Size: | 7.53 KB |
---|---|
Views Total: | 912 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Noticejs is a very small (3kb minified) jQuery plugin for displaying notification messages which can be integrated into any CSS framework (e.g. Bootstrap).
How to use it:
1. Load the main JavaScript file notice.min.js
after you've loaded jQuery library as this:
<script src="//code.jquery.com/jquery.min.js"></script> <script src="notice.js"></script>
2. In this case, we're going to use Bootstrap framework for the notification styles.
<link rel="stylesheet" href="bootstrap.min.css"> <script src="theme/bootstrap/bootstrap.js"></script>
3. Display a default notification with custom title and content on the webpage.
$.notice({ title: "Notification Title" content: "Notification Content" });
4. Customize the notification message with the following options.
$.notice({ title: "Notification Title" content: "Notification Content" },{ themePath: "theme/bootstrap/", themeName: "DefaultTheme", themeMinification: false, isRtl: false, noticeClose: true, noticePosition: "topRight", defaultNoticePosition: { topRight:{ top: "10px", right: "10px" }, topCenter:{ top: "10px", left: "50%", transform: "translate(-50%, 0)" }, topLeft:{ top: "10px", left: "10px" }, middleRight:{ right: "10px", top: "50%", right: "10px", transform: "translate(0px, -50%)", }, middleCenter:{ top: "50%", left: "50%", transform: "translate(-50%, -50%)", }, middleLeft:{ left: "10px", top: "50%", right: "10px", transform: "translate(0px, -50%)", }, bottomRight:{ bottom: "10px", right: "10px" }, bottomCenter:{ bottom: "10px", left: "50%", transform: "translate(-50%, 0)" }, bottomLeft:{ bottom: "10px", left: "10px" } }, html: { container: "<div class=\"noticejs\"></div>", notice: "<div class=\"notice\"></div>", header: "<div class=\"notice-header\"></div>", title: "<div class=\"notice-title\"></div>", close: "<div class=\"notice-close\">×</div>", body: "<div class=\"notice-body\"></div>", footer: "<div class=\"notice-footer\"></div>" }, defaultNoticeType: {}, noticeType: "" });
5. Add your own theme as you seen in the theme/bootstrap/bootstrap.js
.
$.notice.addTheme({ themePath: "theme/bootstrap/", themeName: "bootstrap", themeMinification: true, isRtl: false, html: { container: "<div class=\"noticejs\"></div>", notice: "<div class=\"notice alert\"></div>", header: "<div class=\"notice-header\"></div>", title: "<div class=\"notice-title\"></div>", close: "<div class=\"notice-close\">×</div>", body: "<div class=\"notice-body\"></div>", footer: "<div class=\"notice-footer\"></div>" }, defaultNoticeType: { error: { className: "alert-danger", attributes:{} }, warning: { className: "alert-warning", attributes:{} }, info: { className: "alert-info", attributes:{} }, success: { className: "alert-success", attributes:{} } }, noticeType: "error" });
This awesome jQuery plugin is developed by alihesari. For more Advanced Usages, please check the demo page or visit the official website.