Presentation is loading. Please wait.

Presentation is loading. Please wait.

JQuery Plugin Development By Mike Alsup. What is a plugin? Why Write One? A way to extend the core library A way to reuse code A way to contribute!

Similar presentations


Presentation on theme: "JQuery Plugin Development By Mike Alsup. What is a plugin? Why Write One? A way to extend the core library A way to reuse code A way to contribute!"— Presentation transcript:

1 jQuery Plugin Development By Mike Alsup

2 What is a plugin? Why Write One? A way to extend the core library A way to reuse code A way to contribute!

3 Agenda Quick Overview of Types Considerations, Rules, Conventions Diving In Tips Q&A

4 Types of Plugins Methods: Element-centric $(‘#myDiv’).myPlugin(); Psuedo Expressions Extend jQuery.expr[:] object Animations Extend jQuery.easing or jQuery.fx.speed

5 Considerations Host Environment Target Audience Other Libraries installed Older versions of jQuery Documentation Extensibility / Flexibility Interoperability Metadata plugin Easing plugin

6 “Rules” jQuery vs $ Don’t use the global ‘$’ Use ‘jQuery’ or a closure-protected ‘$’ Implicit iteration $(‘ ’).hide(); Iterate the nodeset Honor Chaining $().one().two() return “this” Semicolons Use ‘em

7 Conventions Namespaces Choose one (ex: $(...).myPlugin() ) Plugin closure pattern ;(function($){ /* my code here! */})(jQuery); $this, $that ex: var $this = $(this) File name jquery.pluginname.js

8 The Extension Point jQuery.fn jQuery.fn === jQuery.prototype jQuery.fn.myPlugin = function() …

9 Getting Started // a simple no-op plugin jQuery.fn.myPlugin = function() { }

10 Getting Started // a simple no-op plugin jQuery.fn.myPlugin = function() { // what is this? return this; }; Honor chaining

11 Getting Started // a simple no-op plugin jQuery.fn.myPlugin = function() { this.each(function() { // what is this? }); return this; }; Iterate the nodeset Honor chaining

12 Getting Started ;(function($) { // a simple no-op plugin $.fn.myPlugin = function() { this.each(function() {... }); return this; }; })(jQuery); $(‘#myDiv’).myPlugin(); Use a closure Iterate the nodeset Honor chaining

13 Example 1 Change the colors of an element when hovering over it.

14 Example 1

Ads by Google