EL7R_NOTIFY JQUERY PLUGIN


This is my first jquery plugin, it is inspired by Ubuntu (Linux distribution) notifications system.
This is my first jquery plugin, it is inspired by Ubuntu (Linux distribution) notifications system.
This is my first jquery plugin, it is inspired by Ubuntu (Linux distribution) notifications system.

FEATURES:
  • You can choose the notification's place, horizontally and vertically. (ex: top right, bottom left)
  • You can add an icon to the notification.
  • Supports skins, you can choose a separate skin for each notification at the same page.
  • You can choose the delay time for each notification.
  • You can choose whether to show (X) button or no.
  • You can choose the effect of each notification (currently 3 effects are available, they are fade, animate & slide).
  • Small size, and loads fast.
  • Supports all the major browsers (ff,ie,chrome,opera).
  • Uses css3 border-radius and box-shadow.
default theme
silver theme
HOW TO USE:
Download the files  and extract them, paste them anywhere inside your website's folder. Then include el7r_notify.min.jq.css & el7r_notify.min.jq.js. Make sure that jquery is included, if no then you have to include it before them.
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="el7r_notify.min.jq.js" type="text/javascript"></script>
<link href="el7r_notify.min.jq.css" rel="stylesheet" type="text/css" />
Now you can use the plugin anywhere, the best way to generate the notification's code is by visiting the demo page where you can edit the options and see the result live, and get the code. The code should look like this:
$().el7r_notify({'text':'hello world', 'place_v':'top', 'place_h':'right','icon':'', 'skin':'default', 'delay':'4000', 'ex':'true', 'effect':'animate'});
You can use this code in several ways, examples:
<script>
$(function() {
 $().el7r_notify({'text':'hello world'});
});
</script>
In the previous example a notification will appear once the page is loaded
<a href="#" onclick="$().el7r_notify({'text':'hello world'});">Click Me</a>
In the previous example a notification will appear once the link is clicked.
     DEMO | DOWNLOAD

    No comments:

    Post a Comment