jQuery%20Plugin%20Development

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
• QA

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
• Dont use the global
• Use jQuery or a closure-protected
• Implicit iteration (ltdivgt).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)
Use a closure
Iterate the nodeset
Honor chaining
(myDiv).myPlugin()
13
Example 1
Change the colors of an element when hovering
over it.
14
Example 1
lthtmlgt ltheadgt ltscript type"text/javascript"
src"../jquery-1.2.6.js"gtlt/scriptgt ltstyle
type"text/css"gt lt/stylegt lt/headgt ltbodygt
ltdiv id"sidebar"gt ltdivgtlth1gtHeading
Onelt/h1gtcontent ...lt/divgt
ltdivgtlth1gtHeading Twolt/h1gtcontent ...lt/divgt
ltdivgtlth1gtHeading Threelt/h1gtcontent ...lt/divgt
lt/divgt ltdiv idmain"gt
ltdivgtlth1gtHeading Onelt/h1gtcontent ...lt/divgt
ltdivgtlth1gtHeading Twolt/h1gtcontent ...lt/divgt
ltdivgtlth1gtHeading Threelt/h1gtcontent ...lt/divgt
lt/divgt lt/bodygt lt/htmlgt
15
Example 1
lthtmlgt ltheadgt ltscript type"text/javascript"
src"../jquery-1.2.6.js"gtlt/scriptgt ltstyle
type"text/css"gt .highlight background-color
ffd lt/stylegt lt/headgt ltbodygt ltdiv
id"sidebar"gt ltdivgtlth1gtHeading
Onelt/h1gtcontent ...lt/divgt
ltdivgtlth1gtHeading Twolt/h1gtcontent ...lt/divgt
ltdivgtlth1gtHeading Threelt/h1gtcontent ...lt/divgt
lt/divgt ltdiv idmain"gt
ltdivgtlth1gtHeading Onelt/h1gtcontent ...lt/divgt
ltdivgtlth1gtHeading Twolt/h1gtcontent ...lt/divgt
ltdivgtlth1gtHeading Threelt/h1gtcontent ...lt/divgt
lt/divgt lt/bodygt lt/htmlgt
16
Example 1 cont.
ltscript type"text/javascript"gt (document).ready
(function() ('h1').hover(
function() (this).addClass('highlig
ht') , function ()
(this).removeClass('highlight')
) ) lt/scriptgt
17
Example 1 cont.
ltscript type"text/javascript"gt (document).ready
(function() ('main h1').hover(
function() (this).addClass('highlig
ht') , function ()
(this).removeClass('highlight')
) ('sidebar h1').hover(
function() (this).addClass('highlig
ht2') , function ()
(this).removeClass('highlight2')
) ) lt/scriptgt
18
Example 1 cont.
ltscript type"text/javascript"gt
lt/scriptgt
19
Example 1 cont.
ltscript type"text/javascript"gt (function()
)(jQuery) (document).ready(func
tion() ) lt/scriptgt
20
Example 1 cont.
ltscript type"text/javascript"gt (function()
.fn.hoverClass function(c)
)(jQuery) (document).ready(func
tion() ) lt/scriptgt
21
Example 1 cont.
ltscript type"text/javascript"gt (function()
.fn.hoverClass function(c) return
this.hover( function()
(this).addClass(c) , function
() (this).removeClass(c)
) )(jQuery) (document).ready(funct
ion() ) lt/scriptgt
... return this.hover(function() ... )
... this.hover(function() ... ) return
this
22
Example 1 cont.
ltscript type"text/javascript"gt (function()
.fn.hoverClass function(c) return
this.hover( function()
(this).addClass(c) , function
() (this).removeClass(c)
) )(jQuery) (document).ready(funct
ion() ('main h1').hoverClass('highlight')
('sidebar h1').hoverClass('highlight2') )
lt/scriptgt
23
Example 1 - jquery.hoverClass.js
(function() .fn.hoverClass function(c)
return this.hover( function()
(this).addClass(c) ,
function () (this).removeClass(c)
) )(jQuery)
24
Example 1 complete
lthtmlgt ltheadgt ltscript type"text/javascript"
srcjquery-1.2.6.js"gtlt/scriptgt ltscript
type"text/javascript" src"jquery.hoverClass.js"gt
lt/scriptgt ltscript type"text/javascript"gt ltstyle
typetext/cssgt ... lt/stylegt (document).ready(
function() ('main h1').hoverClass('highlig
ht') ('sidebar h1').hoverClass('highlight2'
) ) lt/scriptgt lt/headgt ltbodygt ...
25
Example 2
Submit a form using AJAX
26
Example 2
ltform id"form1" action"test.php"
method"POST"gt Name ltinput type"text"
name"user" /gt Comment ltinput type"text"
name"comment" /gt ltinput
type"submit" value"Submit" /gt lt/formgt
27
Example 2
ltform id"form1" action"test.php"
method"POST"gt Name ltinput type"text"
name"user" /gt Comment ltinput type"text"
name"comment" /gt ltinput
type"submit" value"Submit" /gt lt/formgt
28
Example 2
(function() )(jQuery)
29
Example 2
(function() .fn.formlite function()
)(jQuery)
30
Example 2
(function() .fn.formlite function()
return this.submit(function()
) )(jQuery)
... return this.submit(function() ... )
... this.submit(function() ... ) return
this
31
Example 2
(function() .fn.formlite function()
return this.submit(function() var
form (this) ) )(jQuery)
32
Example 2
(function() .fn.formlite function()
return this.submit(function() var form
(this) .ajax( url
form.attr(action), type
form.attr(method) GET data
form.serialize() )
) )(jQuery)
33
jquery.formlite.js
(function() .fn.formlite function()
return this.submit(function() var form
(this) .ajax( url
form.attr(action), type
form.attr(method) GET data
form.serialize() ) return false
) )(jQuery)
34
Example 2
lthtmlgt ltheadgt ltscript typetext/javascript
srcjquery.formlite1.jsgtlt/scriptgt ltscript
typetext/javascriptgt (document).ready(function
() ('form1').formlite() ) lt/scriptgt lt/h
eadgt ltbodygt ltform id"form1"
action"test.php" method"POST"gt Name
ltinput type"text" name"user" /gt
Comment ltinput type"text" name"comment" /gt
ltinput type"submit" value"Submit" /gt
lt/formgt lt/bodygt lt/htmlgt
35
Options
36
Example 2
(function() .fn.formlite
function(options) return
this.submit(function() var form
(this) .ajax( url
form.attr(action), type
form.attr(method) GET data
form.serialize() ) return false
) )(jQuery)
37
Example 2
(function() .fn.formlite
function(options) return
this.submit(function() var form
(this) var opts .extend( url
form.attr('action'), method
form.attr('method') GET , options
) .ajax( url opts.url,
type opts.method, data
form.serialize() ) return false
) )(jQuery)
38
Example 2
lthtmlgt ltheadgt ltscript typetext/javascript
srcjquery.formlite.jsgtlt/scriptgt ltscript
typetext/javascriptgt (function()
('form1').formlite( url test-ajax.php
) ) lt/scriptgt lt/headgt ltbodygt ltform
id"form1" action"test.php" method"POST"gt
Name ltinput type"text" name"user" /gt
Comment ltinput type"text" name"comment" /gt
ltinput type"submit" value"Submit" /gt
lt/formgt lt/bodygt lt/htmlgt
39
More Options

• target
• success

40
Example 2
(function() .fn.formlite
function(options) return this.submit(functio
n() ... .ajax( url
opts.url, type opts.method,
data form.serialize(), success
function(response) if
(opts.target)
(opts.target).html(response)
if (opts.success)
opts.success(response) // hmmmm....
) return false
) )(jQuery)
41
Example 2
(function() .fn.formlite
function(options) return this.submit(functio
n() var form this, form (this)
.ajax( url opts.url, type
opts.method, data form.serialize(),
success function(response)
if (opts.target)
(opts.target).html(response)
if (opts.success)
opts.success.call(form, response)
) return false
) )(jQuery)
42
Example 2
(function() .fn.formlite
function(options) return this.submit(functio
n() var form this, form (this)
.ajax( url opts.url, type
opts.method, data form.serialize(),
success function(response)
if (opts.target)
(opts.target).html(response)
if (opts.success)
opts.success.call(form, response)
) return false ) )(jQuery)
if (opts.success) opts.success(response)
if (opts.success) opts.success.call(form,
response)
43
Example 2
lthtmlgtltheadgt ltscript typetext/javascript
srcjquery.formlite.jsgtlt/scriptgt ltscript
typetext/javascriptgt (function()
('form1').formlite( target 'response1' )
('form2').formlite( success onSuccess
) function onSuccess(response)
// this is the form element
('response2').html(response)
) lt/scriptgt lt/headgtltbodygt ltform
id"form1" action"test.php" method"POST"gt
... lt/formgt ltdiv idresponse1gtlt/divgt
ltform id"form2" action"test.php"
method"POST"gt ... lt/formgt ltdiv
idresponse2gtlt/divgt lt/divgtlt/bodygt lt/htmlgt
44
Example 3
A slideshow plugin
45
Example 3

• ...
• ('.slideshow').slideshow()
• ...
• ltbodygt
• ltdiv class"slideshowgt
• ltimg src"images/beach1.jpg" /gt
• ltimg src"images/beach2.jpg" /gt
• ltimg src"images/beach3.jpg" /gt
• lt/divgt
• ltdiv class"slideshow"gt
• ltimg src"images/beach4.jpg" /gt
• ltimg src"images/beach5.jpg" /gt
• ltimg src"images/beach6.jpg" /gt
• lt/divgt
• lt/bodygt

46
Example 3

• .fn.slideshow function()
• return this.each(function()
• )

47
Example 3

• .fn.slideshow function()
• return this.each(function()
• // this is our slideshow container
  element
• var this (this)
• var slides this.children()
• var curr 0, slideCount
  slides.size()
• )

48
Example 3

• .fn.slideshow function()
• return this.each(function()
• // this is our slideshow container
  element
• var this (this)
• var slides this.children()
• var curr 0, slideCount
  slides.size()
• // hide all slides but the first
• slides.each(function(i)
• // 'this' is the slide element
• (this)i0 ? 'show' 'hide'()
• )
• )

49
Example 3

• .fn.slideshow function()
• return this.each(function()
• // this is our slideshow container
  element
• var this (this)
• var slides this.children()
• var curr 0, slideCount
  slides.size()
• // hide all slides but the first
• slides.each(function(i)
• // 'this' is the slide element
• (this)i0 ? 'show' 'hide'()
• )
• function transition() // private
  function
• ...
• setTimeout(transition, 4000) // start
  the initial timer
• )

50
Example 3

• .fn.slideshow function()
• return this.each(function()
• ...
• function transition()
• var next curr (slideCount - 1) ?
  0 curr 1
• // fadeOut curr, fadeIn next
• (slidescurr).fadeOut()
• (slidesnext).fadeIn()
• // start timer again
• setTimeout(transition, 4000)
• curr curr (slideCount - 1) ? 0
  curr 1
• // start the initial timer
• setTimeout(transition, 4000)
• )

51
Options

• timeout
• speed

52
Example 3

• .fn.slideshow function(options)
• return this.each(function()
• // this is our slideshow container
  element
• var this (this)
• // build opts object
• var opts .extend(
• ,
• .fn.slideshow.defaults,
• options )
• ...
• // plugin default settings
• .fn.slideshow.defaults
• timeout 4000,
• speed 1000

53
Example 3

• .fn.slideshow function(options)
• return this.each(function()
• // this is our slideshow container
  element
• var this (this)
• // build opts object var opts
  .extend(
• ,
• .fn.slideshow.defaults,
• options ,
• .metadata ? this.metadata() )
• ...
• // plugin default settings
• .fn.slideshow.defaults
• timeout 4000,
• speed 1000

54
Example 3

• // private
• function transition()
• var next curr (slideCount - 1) ?
  0 curr 1
• // fadeOut curr, fadeIn next
• (slidescurr).fadeOut(opts.speed)
• (slidesnext).fadeIn(opts.speed)
• // start timer again
• setTimeout(transition, opts.timeout)
• curr curr (slideCount - 1) ? 0
  curr 1

55
Example 3

• ltscript type"text/javascript"
• src"jquery.metadata.js"gtlt/scriptgt
• ltscript type"text/javascript"gt
• .metadata.setType("attr", "data-jquery")
• (function()
• ('.slideshow').slideshow()
• )
• // .fn.slideshow.defaults.speed 500
• lt/scriptgt
• ltbodygt
• ltdiv class"slideshow"
• data-jquery " timeout 2000, speed 300 "gt
• ltimg src"images/beach1.jpg" /gt
• ...
• lt/divgt
• ltdiv class"slideshow"gt
• ltimg src"images/beach4.jpg" /gt
• ...

56
Tips

• Learn the core dont reinvent the wheel
• .serialize()
• .param()
• ().data(), ().removeData()
• .trim()
• .isFunction()
• Public vs private (functions and properties)
• Callbacks and this

57
Tips
Version your plugin .fn.myPlugin.version 1

• Logging
• // define log function within your plugin closure
• function log()
• if (window.console window.console.log)
• window.console.log(
• 'pluginName '
• Array.prototype.join.call(arguments,''))
  
• // example from Cycle Plugin
• if (els.length lt 2)
• log('terminating too few slides',
  els.length)
• return

58
Tips

• If you publish a plugin...
• Monitor the jQuery mailing list
• Have thick skin (don't be defensive)
• Respect your users

59
Thanks!
http//jquery.malsup.com/tae/