jQuery Plugin For iOS Style Notification Center - obNotificationCenter.js

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.