• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery Plugin

jQuery Plugin



How to Create Your Own jQuery Plugin

How to Create Your Own jQuery Plugin



Total Views
Views on SlideShare
Embed Views



1 Embed 3

http://www.slideshare.net 3


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Show Some Demos of Plugins
  • Show jquery.devlink.js

jQuery Plugin jQuery Plugin Presentation Transcript

  • How to Create 
    Your Own 
    jQuery Plugin
    by Elijah Manor
  • Who Am I?
    Sommet Group, offering expertise in payroll, human resources, technology, risk management and insurance to help simplify your business.  
    Elijah Manor
    • elijah.manor@gmail.com
    • @elijahmanor
    • http://elijahmanor.com
  • Why Create a jQuery Plugin?
    • Reuse, Reuse, & Reuse
    • Encapsulation
    • Prevent Collisions using Namespaces
    • They are easy to create
    • Because they are soooo cool 
  • How Does a jQuery Plugin Work?
    Plugins are passed the this object which references the jQuery object
    Plugin manipulates the DOM
    When finished, the Plugin should return this to facilitate chaining
  • Plugin Declaration
    • jQuery.prototype.tooltip= function(options) { 
    • $.fn.tooltip = function(options) {  
    • Self Invoking Anonymous Function
        $.fn.tooltip = 
          function(options) { ... }
  • Plugin Parameters: Part 1
    • You could pass individual parameters to your jQueryPlugin
    $.fn.tooltip =
    function(text, color) {};
       .tooltip('Hello World!',
    • However, I am more a proponent of passing a JSON object...
  • Plugin Parameters: Part 2
    • Provide a set of Public Accessible Default Plugin Settings for User to Manipulate
    • Accept Custom Settings from the User
    • Merge the Default Settings and Custom Settings and use the Union within the Plugin
      $.fn.tooltip = function(options){};
        text: 'Hello World!',
        color: '#cccccc'
  • For Each
    • Note: The Plugin may have been passed one or more elements
    • A common technique is to use jQuery'seachmethod to enumerate through the elements
      this.each(function() {      var $this = $(this);      //etc...
  • Public Functions
    $.fn.tooltip = function(options) {  return this.each(function() {    var$this = $(this);    varmessage = 
          $.fn.tooltip.public();  });};$.fn.tooltip.public = function(){
      return 'Hello World!';};
  • Private Functions
    (function($) {  $.fn.tooltip = function(options) { 
        varmessage = private();  };    function private() {
        return 'Hello World!';  };})(jQuery);
  • Support the Metadata Plugin: Part 1
    • Provide Additional Information to a particular element… 
    class="someclass{some: 'data'}">
    </li> <lidata="{some:'random',
    json: 'data'}"></li>Etc…
  • Support the Metadata Plugin: Part 2
      $.fn.tooltip = function(options) {     var opts = $.extend({},   
          $.fn.tooltip.defaults, options);    return this.each(function() {      var $this = $(this);      //Element Specific Options      var o= $.meta ? $.extend({},
    opts, $this.data()):opts;
    //Plugin Logic Here…
  • Allow for Chaining!
    • As with most jQuery functions and Plugins, it is desirable to return the jQuery object to facilitate chaining
      $(‘a’).css(‘color’, ‘red’).fadeIn();
        $.fn.tooltip = function(options){       return this; //chainability      }    })(jQuery); 
  • More jQueryPlugins
    • jToolTipjQueryPlugin
    • jGalleryjQueryPlugin
    • SommetGroupjQueryPlugin
  • Questions?
    Elijah Manor
    • http://speakerrate.com/elijahmanor
    • elijah.manor@gmail.com
    • @elijahmanor
    • http://elijahmanor.com
    Individuals with a Relevant
    Question will Receive a
    Sommet Group
    Concept, Code, Conquer
    jQueryPlugin T-Shirt