SlideShare a Scribd company logo
1 of 15
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 ,[object Object]
@elijahmanor
http://elijahmanor.com,[object Object]
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 ,[object Object],  ,[object Object],  ,[object Object],    (function($){     $.fn.tooltip =        function(options) { ... }    })(jQuery);  @elijahmanor
Plugin Parameters: Part 1 ,[object Object],$.fn.tooltip =     function(text, color) {};     $('#helloWorld')     .tooltip('Hello World!',       '#cccccc');   ,[object Object],  @elijahmanor
Plugin Parameters: Part 2 ,[object Object]
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 ,[object Object],  ,[object Object],    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

More Related Content

What's hot

Ch 5 boolean logical in alice
Ch 5  boolean logical in aliceCh 5  boolean logical in alice
Ch 5 boolean logical in alice
Chaffey College
 

What's hot (10)

Advance jquery-plugin
Advance jquery-pluginAdvance jquery-plugin
Advance jquery-plugin
 
Biglietti, prego! A ticket for the (command) bus
Biglietti, prego! A ticket for the (command) busBiglietti, prego! A ticket for the (command) bus
Biglietti, prego! A ticket for the (command) bus
 
Smarter Interfaces with jQuery (and Drupal)
Smarter Interfaces with jQuery (and Drupal)Smarter Interfaces with jQuery (and Drupal)
Smarter Interfaces with jQuery (and Drupal)
 
Zend framework 04 - forms
Zend framework 04 - formsZend framework 04 - forms
Zend framework 04 - forms
 
Single Page Web Apps with Backbone.js and Rails
Single Page Web Apps with Backbone.js and RailsSingle Page Web Apps with Backbone.js and Rails
Single Page Web Apps with Backbone.js and Rails
 
Php using variables-operators
Php using variables-operatorsPhp using variables-operators
Php using variables-operators
 
The Human Linter
The Human LinterThe Human Linter
The Human Linter
 
Ch 5 boolean logical in alice
Ch 5  boolean logical in aliceCh 5  boolean logical in alice
Ch 5 boolean logical in alice
 
Cells
CellsCells
Cells
 
WordPress: From Antispambot to Zeroize
WordPress: From Antispambot to ZeroizeWordPress: From Antispambot to Zeroize
WordPress: From Antispambot to Zeroize
 

Viewers also liked

Jquery Plugin
Jquery PluginJquery Plugin
Jquery Plugin
Ravi Mone
 
jQuery Plugin Creation
jQuery Plugin CreationjQuery Plugin Creation
jQuery Plugin Creation
benalman
 

Viewers also liked (8)

All in one off page seo
All in one off page seoAll in one off page seo
All in one off page seo
 
Making the Work Visible
Making the Work VisibleMaking the Work Visible
Making the Work Visible
 
Jquery Plugin
Jquery PluginJquery Plugin
Jquery Plugin
 
Jquery plugin development
Jquery plugin developmentJquery plugin development
Jquery plugin development
 
Test Driving a jQuery Plugin
Test Driving a jQuery PluginTest Driving a jQuery Plugin
Test Driving a jQuery Plugin
 
So, you want to be a plugin developer?
So, you want to be a plugin developer?So, you want to be a plugin developer?
So, you want to be a plugin developer?
 
An easy guide to Plugin Development
An easy guide to Plugin DevelopmentAn easy guide to Plugin Development
An easy guide to Plugin Development
 
jQuery Plugin Creation
jQuery Plugin CreationjQuery Plugin Creation
jQuery Plugin Creation
 

Similar to jQuery Plugin

international PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secretsinternational PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secrets
smueller_sandsmedia
 
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
arcware
 
Javascript Frameworks for Joomla
Javascript Frameworks for JoomlaJavascript Frameworks for Joomla
Javascript Frameworks for Joomla
Luke Summerfield
 

Similar to jQuery Plugin (20)

Building Robust jQuery Plugins
Building Robust jQuery PluginsBuilding Robust jQuery Plugins
Building Robust jQuery Plugins
 
international PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secretsinternational PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secrets
 
jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery Applications
 
Jquery plugin development
Jquery plugin developmentJquery plugin development
Jquery plugin development
 
Clean Javascript
Clean JavascriptClean Javascript
Clean Javascript
 
JSConf: All You Can Leet
JSConf: All You Can LeetJSConf: All You Can Leet
JSConf: All You Can Leet
 
Curso Symfony - Clase 4
Curso Symfony - Clase 4Curso Symfony - Clase 4
Curso Symfony - Clase 4
 
jQuery Performance Rules
jQuery Performance RulesjQuery Performance Rules
jQuery Performance Rules
 
JavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesJavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best Practices
 
jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets
 
Using and reusing CakePHP plugins
Using and reusing CakePHP pluginsUsing and reusing CakePHP plugins
Using and reusing CakePHP plugins
 
Javascript And J Query
Javascript And J QueryJavascript And J Query
Javascript And J Query
 
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
 
Getting the Most Out of jQuery Widgets
Getting the Most Out of jQuery WidgetsGetting the Most Out of jQuery Widgets
Getting the Most Out of jQuery Widgets
 
Javascript Frameworks for Joomla
Javascript Frameworks for JoomlaJavascript Frameworks for Joomla
Javascript Frameworks for Joomla
 
jQuery Plugin
jQuery PluginjQuery Plugin
jQuery Plugin
 
Javascript Experiment
Javascript ExperimentJavascript Experiment
Javascript Experiment
 
Closure
ClosureClosure
Closure
 
How to write not breakable unit tests
How to write not breakable unit testsHow to write not breakable unit tests
How to write not breakable unit tests
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 

jQuery Plugin

  • 1. How to Create  Your Own  jQuery Plugin by Elijah Manor
  • 2.
  • 4.
  • 5. They are easy to create
  • 6. Because they are soooo cool       @elijahmanor
  • 7. 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
  • 8.
  • 9.
  • 10.
  • 11. Accept Custom Settings from the User
  • 12. 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
  • 13.
  • 14. 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
  • 15. Private Functions (function($) {  $.fn.tooltip = function(options) {      varmessage = private();  };    function private() {     return 'Hello World!';  };})(jQuery); @elijahmanor
  • 16.
  • 17. 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
  • 18.
  • 19.
  • 22.
  • 25. http://elijahmanor.comIndividuals with a Relevant Question will Receive a Sommet Group Concept, Code, Conquer jQueryPlugin T-Shirt

Editor's Notes

  1. Show Some Demos of Plugins
  2. Show jquery.devlink.js