PORTFOLIOBLOGABOUT ME عربي

[EL7R]

Tuesday, May 24, 2011

EL7R_NOTIFY JQUERY PLUGIN

default theme
 (this post in arabic | هذه التدوينة بالعربية )
This is my first jquery plugin, it is inspired by Ubuntu (Linux distribution) notifications system.

FEATURES:
  • silver theme
    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.
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