Notification center is a jquery plugin that implements a simple notification center like like Apple OS X.
FEATURES
- Document title modification to show alert count
- Display only a certain amount of notifs at once
- Sound notification if the user is on an other tab/page
- Per type Sounds/Colors/alert timeout and notif count displayed
- Pop up alerts that are not retained in the notif pane
- Click overlay when the pane is open so any click closes the pane
- Notif callbacks, including a redisplay notification option
- Export callback so you can save the list of current notifs
- Mobile compat, includes options for swipe delete on notifs
- Mobile on notifications stay in viewport even with pinch zoom
- CSS Styled allows lots of styling control to the site
- Allow ajax and/or faye alerts on top of js calls to create alerts
- Allow Sticky notifications, sticky notifications also have an optional settable action button
1. INCLUDE CSS AND JS FILES
<link href="css/notifcenter.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery.notificationcenter.js"></script>
- Want to display the date for each notification?
Include Moment.js and Livestamp.js and ENJOY
- Want mobile support with swipe delete? Try it on a mobile device, swipe left on a notif in the notification panel to delete it.
Include jquery.mobile.js and ENJOY :) (jquery.mobile.css not required)
2. HTML
<body>
<div id="noticationcentermain">
[...]all your html[...]
</div>
</body>
3. JAVASCRIPT
$('body').notificationcenter(
center_element: "#notificationcenterpanel",
body_element: "#noticationcentermain",
toggle_button: "#notificationcentericon",
add_panel: true,
notification_offset: 0,
display_time: 5000,
types: [],
type_max_display: 5,
truncate_message: 0,
header_output: 'icon type count',
counter: true,
default_notifs: [],
faye: false,
ajax: false,
ajax_checkTime: 5000,
alert_hidden: true,
alert_hidden_sound: "sounds/Funk",
store_callback: false
);Notification center for jQuery
No comments:
Post a Comment