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

jQuery Plugin

on

  • 1,953 views

How to Create Your Own jQuery Plugin

How to Create Your Own jQuery Plugin

Statistics

Views

Total Views
1,953
Views on SlideShare
1,950
Embed Views
3

Actions

Likes
1
Downloads
41
Comments
0

1 Embed 3

http://www.slideshare.net 3

Accessibility

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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 
     
     
     
    @elijahmanor
  • 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
     
    @elijahmanor
  • Plugin Declaration
    • jQuery.prototype.tooltip= function(options) { 
     
    • $.fn.tooltip = function(options) {  
     
    • Self Invoking Anonymous Function
     
      (function($){
        $.fn.tooltip = 
          function(options) { ... }
      })(jQuery); 
    @elijahmanor
  • Plugin Parameters: Part 1
    • You could pass individual parameters to your jQueryPlugin
    $.fn.tooltip =
    function(text, color) {};
     
      $('#helloWorld')
       .tooltip('Hello World!',
    '#cccccc');
     
    • However, I am more a proponent of passing a JSON object...
     
    @elijahmanor
  • 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){};
     
      $('#helloWorld').tooltip({
        text: 'Hello World!',
        color: '#cccccc'
      }); 
     
     
    @elijahmanor
  • 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...
      }  
    @elijahmanor
  • Public Functions
    $.fn.tooltip = function(options) {  return this.each(function() {    var$this = $(this);    varmessage = 
          $.fn.tooltip.public();  });};$.fn.tooltip.public = function(){
      return 'Hello World!';};
    @elijahmanor
  • Private Functions
    (function($) {  $.fn.tooltip = function(options) { 
        varmessage = private();  };    function private() {
        return 'Hello World!';  };})(jQuery);
    @elijahmanor
  • Support the Metadata Plugin: Part 1
    • Provide Additional Information to a particular element… 
    <li
    class="someclass{some: 'data'}">
    </li> <lidata="{some:'random',
    json: 'data'}"></li>Etc…
    @elijahmanor
  • 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…
        }
      }
    @elijahmanor
  • 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();
      (function($){
        $.fn.tooltip = function(options){       return this; //chainability      }    })(jQuery); 
    @elijahmanor
  • More jQueryPlugins
    • jToolTipjQueryPlugin
    • jGalleryjQueryPlugin
    • SommetGroupjQueryPlugin
     
    @elijahmanor
  • 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