tripl3inf
4/11/2014 - 8:44 PM

jQuery Plugin Creation

jQuery Plugin Creation

// simple: does NOT work on an element
    $.fn.myPluginName = function() {
    // your plugin logic
    };
  
// simple: works on a(n) element(s)
    $.fn.myPluginName = function() {
        return this.each(function(i) {
            var $this = $(this);
            // console.log('this is ' + $this);
        });
    };
  
    $(el).myPluginName();


// extend w/ multiple functions
(function( $ ){
    $.extend($.fn, {
        myplugin: function(){
            // your plugin logic
        }
    });
})( jQuery );


// with options
(function( $ ){     // ready function

  $.fn.myPluginName = function() {
    // Establish our default settings
    var settings = $.extend({
        color        : '#666'
    }, options);
    
    // your plugin logic
    return this.each(function() {
      $this = $(this);
      if(settings.color) {
        $this.css({color:settings.color});
        console.log('test '+ settings.color );
      }
    });
  };
  
})( jQuery );