Posted By

LuckyShot on 05/20/10


Tagged

plugin jquery


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

Hollow
cdnicoll
legacye
jeremyalfordgmailcom
johnw


jQuery Plugin Code Template


 / Published in: jQuery
 

URL: http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial

  1. (function($){
  2. $.fn.extend({
  3. //plugin name - animatemenu
  4. pluginnamehere: function(options) {
  5.  
  6. //Settings list and the default values
  7. var defaults = {
  8. animatePadding: 60,
  9. defaultPadding: 10,
  10. evenColor: '#ccc',
  11. oddColor: '#eee'
  12. };
  13.  
  14. var options = $.extend(defaults, options);
  15.  
  16. return this.each(function() {
  17. var o =options;
  18.  
  19. //Assign current element to variable, in this case is UL element
  20. var obj = $(this);
  21.  
  22. //Get all LI in the UL
  23. var items = $("li", obj);
  24.  
  25. //Change the color according to odd and even rows
  26. $("li:even", obj).css('background-color', o.evenColor);
  27. $("li:odd", obj).css('background-color', o.oddColor);
  28.  
  29. //Attach mouseover and mouseout event to the LI
  30. items.mouseover(function() {
  31. $(this).animate({paddingLeft: o.animatePadding}, 300);
  32.  
  33. }).mouseout(function() {
  34. $(this).animate({paddingLeft: o.defaultPadding}, 300);
  35. });
  36.  
  37. });
  38. }
  39. });
  40. })(jQuery);
  41.  
  42.  
  43.  
  44.  
  45.  
  46. // Then call it like
  47. $(document).ready(function() {
  48. $('#menu').animateMenu({animatePadding: 30, defaultPadding:10});
  49. });

Report this snippet  

You need to login to post a comment.