jQuery Plugin For iOS Style Notification Center - obNotificationCenter.js
File Size: | 34.4 KB |
---|---|
Views Total: | 2051 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

obNotificationCenter.js is a lightweight and easy jQuery plugin for creating a iOS 7 style notification center that will slide from the top of your page when triggered. Click the bottom line will close the notification center. A little similar to a sliding lightbox with a fullscreen overlay.
How to use it:
1. Include the jQuery obNotificationCenter.js plugin's CSS file in the header.
<link rel="stylesheet" href="css/obNotificationCenter.min.css">
2. Include jQuery javascript library and the jQuery obNotificationCenter.js plugin's javascript file in the footer.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/obNotificationCenter.min.js"></script>
3. Insert notification messages into the notification center.
<div id="content" class="hide"> <div class="obNotifItem"> <div class="obNotifImgWrapper"> Notification Icon </div> <div class="obNotifContent"> <div class="obNotifTitleWrapper"> <div class="obNotifTitle"> Notification Title </div> <div class="obNotifCloseItem"></div> </div> <p class="obNotifDescription"> Notification Description </p> </div> </div> ... </div>
4. Create a button to toggle the notification center.
<button id="trigger" >Show Notification Center</button>
5. The javascript to enable the plugin.
$(document).ready(function(){ $("body").obNotificationCenter({ trigger: "click", selectors: "#trigger", content: $("#content").html() }); });
Change log:
2014-07-13
- Fixes bug that appears when no option are given
2014-04-23
- Addition of a beforeLinkClicked function that allow to do some treatement before open up a notification link
- Enhancement of the beforeLinkClicked function
2014-04-22
- Addition of a beforeLinkClicked function that allow to do some treatement before open up a notification link
This awesome jQuery plugin is developed by open-ball. For more Advanced Usages, please check the demo page or visit the official website.