Saturday, June 9, 2012

how to write jquery plugin


   <script>

(function($){
    $.fn.extend({
        //plugin name - animatemenu
        animateMenu: function(options) {

            var defaults = {
                animatePadding: 60,
                defaultPadding: 10,
                evenColor: '#ccc',
                oddColor: '#eee',
            };
            
            var options = $.extend(defaults, options);
        
            return this.each(function() {
                  var o =options;
                  var obj = $(this);              
                  var items = $("li", obj);
                  
                  $("li:even", obj).css('background-color', o.evenColor);             
                  $("li:odd", obj).css('background-color', o.oddColor);                 
                  
                  items.mouseover(function() {
                      $(this).animate({paddingLeft: o.animatePadding}, 300);
                    
                  }).mouseout(function() {
                      $(this).animate({paddingLeft: o.defaultPadding}, 300);
                    
                  });
            });
        }
    });
})(jQuery);
    
    </script>
   
   
   
   
    <script type="text/javascript">
  
        $('#menu').animateMenu({animatePadding: 30, defaultPadding:10});

    </script>