Jquery plugin development
Download
1 / 59

jQuery Plugin Development - PowerPoint PPT Presentation


  • 101 Views
  • Uploaded on

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!. Agenda. Quick Overview of Types Considerations, Rules, Conventions Diving In Tips Q&A. Types of Plugins.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' jQuery Plugin Development' - margot


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Jquery plugin development

jQueryPlugin Development

By Mike Alsup


What is a plugin why write one
What is a plugin? Why Write One?

  • A way to extend the core library

  • A way to reuse code

  • A way to contribute!


Agenda
Agenda

  • Quick Overview of Types

  • Considerations, Rules, Conventions

  • Diving In

  • Tips

  • Q&A


Types of plugins
Types of Plugins

  • Methods: Element-centric

    $(‘#myDiv’).myPlugin();

  • Psuedo Expressions

    Extend jQuery.expr[:] object

  • Animations

    Extend jQuery.easing or jQuery.fx.speed


Considerations
Considerations

  • Host Environment

    Target Audience

    Other Libraries installed

    Older versions of jQuery

  • Documentation

  • Extensibility / Flexibility

  • Interoperability

    Metadata plugin

    Easing plugin


Rules
“Rules”

  • jQueryvs $

    Don’t use the global ‘$’

    Use ‘jQuery’ or a closure-protected ‘$’

  • Implicit iteration $(‘<div>’).hide();

    Iterate the nodeset

  • Honor Chaining $().one().two()

    return “this”

  • Semicolons

    Use ‘em


Conventions
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


The extension point
The Extension Point

  • jQuery.fn

  • jQuery.fn===jQuery.prototype

  • jQuery.fn.myPlugin = function() …


Getting started
Getting Started

// a simple no-op plugin

jQuery.fn.myPlugin = function() {

}


Getting started1
Getting Started

// a simple no-op plugin

jQuery.fn.myPlugin = function() {

// what is this?

return this;

};

Honor chaining


Getting started2
Getting Started

// a simple no-op plugin

jQuery.fn.myPlugin = function() {

this.each(function() {

// what is this?

});

return this;

};

Iterate the nodeset

Honor chaining


Getting started3
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();


Example 1
Example 1

Change the colors of an element when hovering over it.


Example 11
Example 1

<html>

<head>

<script type="text/javascript"

src="../jquery-1.2.6.js"></script>

<style type="text/css">

</style>

</head>

<body>

<div id="sidebar">

<div><h1>Heading One</h1>content ...</div>

<div><h1>Heading Two</h1>content ...</div>

<div><h1>Heading Three</h1>content ...</div>

</div>

<div id=“main">

<div><h1>Heading One</h1>content ...</div>

<div><h1>Heading Two</h1>content ...</div>

<div><h1>Heading Three</h1>content ...</div>

</div>

</body>

</html>


Example 12
Example 1

<html>

<head>

<script type="text/javascript"

src="../jquery-1.2.6.js"></script>

<style type="text/css">

.highlight { background-color: #ffd }

</style>

</head>

<body>

<div id="sidebar">

<div><h1>Heading One</h1>content ...</div>

<div><h1>Heading Two</h1>content ...</div>

<div><h1>Heading Three</h1>content ...</div>

</div>

<div id=“main">

<div><h1>Heading One</h1>content ...</div>

<div><h1>Heading Two</h1>content ...</div>

<div><h1>Heading Three</h1>content ...</div>

</div>

</body>

</html>


Example 1 – cont.

<script type="text/javascript">

$(document).ready(function() {

$('h1').hover(

function() {

$(this).addClass('highlight');

},

function () {

$(this).removeClass('highlight');

}

);

});

</script>


Example 1 – cont.

<script type="text/javascript">

$(document).ready(function() {

$('#main h1').hover(

function() {

$(this).addClass('highlight');

},

function () {

$(this).removeClass('highlight');

}

);

$('#sidebar h1').hover(

function() {

$(this).addClass('highlight2');

},

function () {

$(this).removeClass('highlight2');

}

);

});

</script>


Example 1 – cont.

<script type="text/javascript">

</script>


Example 1 – cont.

<script type="text/javascript">

;(function($) {

})(jQuery);

$(document).ready(function() {

});

</script>


Example 1 – cont.

<script type="text/javascript">

;(function($) {

$.fn.hoverClass = function(c) {

};

})(jQuery);

$(document).ready(function() {

});

</script>


Example 1 – cont.

<script type="text/javascript">

;(function($) {

$.fn.hoverClass = function(c) {

return this.hover(

function() {

$(this).addClass(c);

},

function () {

$(this).removeClass(c);

}

);

};

})(jQuery);

$(document).ready(function() {

});

</script>

...

return this.hover(function() {

...

});

...

this.hover(function() {

...

});

return this;


Example 1 – cont.

<script type="text/javascript">

;(function($) {

$.fn.hoverClass = function(c) {

return this.hover(

function() {

$(this).addClass(c);

},

function () {

$(this).removeClass(c);

}

);

};

})(jQuery);

$(document).ready(function() {

$('#main h1').hoverClass('highlight');

$('#sidebar h1').hoverClass('highlight2');

});

</script>


;(function($) {

$.fn.hoverClass = function(c) {

return this.hover(

function() {

$(this).addClass(c);

},

function () {

$(this).removeClass(c);

}

);

};

})(jQuery);


Example 1 – complete

<html>

<head>

<script type="text/javascript" src=“jquery-1.2.6.js"></script>

<script type="text/javascript" src="jquery.hoverClass.js"></script>

<script type="text/javascript">

<style type=“text/css”> ... </style>

$(document).ready(function() {

$('#main h1').hoverClass('highlight');

$('#sidebar h1').hoverClass('highlight2');

});

</script>

</head>

<body>

...


Example 2
Example 2

Submit a form using AJAX


Example 21
Example 2

<form id="form1" action="test.php" method="POST">

Name: <input type="text" name="user" />

Comment: <input type="text" name="comment" />

<input type="submit" value="Submit" />

</form>


Example 22
Example 2

<form id="form1" action="test.php"method="POST">

Name: <input type="text" name="user" />

Comment: <input type="text" name="comment" />

<input type="submit" value="Submit" />

</form>


Example 23
Example 2

;(function($) {

})(jQuery);


Example 24
Example 2

;(function($) {

$.fn.formlite = function() {

};

})(jQuery);


Example 25
Example 2

;(function($) {

$.fn.formlite = function() {

return this.submit(function() {

});

};

})(jQuery);

...

return this.submit(function() {

...

});

...

this.submit(function() {

...

});

return this;


Example 26
Example 2

;(function($) {

$.fn.formlite = function() {

return this.submit(function() {

var $form = $(this);

});

};

})(jQuery);


Example 27
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);


Jquery formlite js
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);


Example 28
Example 2

<html>

<head>

<script type=“text/javascript” src=“jquery.formlite1.js”></script>

<script type=“text/javascript”>

$(document).ready(function() {

$('#form1').formlite();

});

</script>

</head>

<body>

<form id="form1" action="test.php" method="POST">

Name: <input type="text" name="user" />

Comment: <input type="text" name="comment" />

<input type="submit" value="Submit" />

</form>

</body>

</html>



Example 29
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);


Example 210
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);


Example 211
Example 2

<html>

<head>

<script type=“text/javascript” src=“jquery.formlite.js”></script>

<script type=“text/javascript”>

$(function() {

$('#form1').formlite( { url: ‘test-ajax.php’ } );

});

</script>

</head>

<body>

<form id="form1" action="test.php" method="POST">

Name: <input type="text" name="user" />

Comment: <input type="text" name="comment" />

<input type="submit" value="Submit" />

</form>

</body>

</html>


More options
More Options

  • target

  • success


Example 212
Example 2

  • ;(function($) {

  • $.fn.formlite = function(options) {

  • return this.submit(function() {

    • ...

    • $.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);


Example 213
Example 2

  • ;(function($) {

  • $.fn.formlite = function(options) {

  • return this.submit(function() {

    • varform = 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);


Example 214
Example 2

  • ;(function($) {

  • $.fn.formlite = function(options) {

  • return this.submit(function() {

    • 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);


Example 215
Example 2

<html><head>

<script type=“text/javascript” src=“jquery.formlite.js”></script>

<script type=“text/javascript”>

$(function() {

$('#form1').formlite({ target: '#response1' });

$('#form2').formlite({ success: onSuccess });

function onSuccess(response) {

// this is the form element

$('#response2').html(response);

};

});

</script>

</head><body>

<form id="form1" action="test.php" method="POST">

...

</form>

<div id=“response1”></div>

<form id="form2" action="test.php" method="POST">

...

</form>

<div id=“response2”></div>

</div></body>

</html>


Example 3
Example 3

A slideshow plugin


Example 31
Example 3

...

$('.slideshow').slideshow();

...

<body>

<div class="slideshow”>

<imgsrc="images/beach1.jpg" />

<imgsrc="images/beach2.jpg" />

<imgsrc="images/beach3.jpg" />

</div>

<div class="slideshow">

<imgsrc="images/beach4.jpg" />

<imgsrc="images/beach5.jpg" />

<imgsrc="images/beach6.jpg" />

</div>

</body>


Example 32
Example 3

$.fn.slideshow = function() {

return this.each(function() {

});

};


Example 33
Example 3

$.fn.slideshow = function() {

return this.each(function() {

// ‘this’ is our slideshow container element

var $this = $(this);

var $slides = $this.children();

varcurr = 0, slideCount = $slides.size();

});

};


Example 34
Example 3

$.fn.slideshow = function() {

return this.each(function() {

// ‘this’ is our slideshow container element

var $this = $(this);

var $slides = $this.children();

varcurr = 0, slideCount = $slides.size();

// hide all slides but the first

$slides.each(function(i) {

// 'this' is the slide element

$(this)[i==0 ? 'show' : 'hide']();

});

});

};


Example 35
Example 3

$.fn.slideshow = function() {

return this.each(function() {

// ‘this’ is our slideshow container element

var $this = $(this);

var $slides = $this.children();

varcurr = 0, slideCount = $slides.size();

// hide all slides but the first

$slides.each(function(i) {

// 'this' is the slide element

$(this)[i==0 ? 'show' : 'hide']();

});

function transition() { // private function

...

};

setTimeout(transition, 4000); // start the initial timer

});

};


Example 36
Example 3

$.fn.slideshow = function() {

return this.each(function() {

...

function transition() {

var next = curr == (slideCount - 1) ? 0 : curr + 1;

// fadeOutcurr, fadeIn next

$($slides[curr]).fadeOut();

$($slides[next]).fadeIn();

// start timer again

setTimeout(transition, 4000);

curr = curr == (slideCount - 1) ? 0 : curr + 1;

};

// start the initial timer

setTimeout(transition, 4000);

});

};


Options1
Options

  • timeout

  • speed


Example 37
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

};


Example 38
Example 3

$.fn.slideshow = function(options) {

return this.each(function() {

// ‘this’ is our slideshow container element

var $this = $(this);

// build opts objectvar opts = $.extend(

{},

$.fn.slideshow.defaults,

options || {},

$.metadata ? $this.metadata() : {});

...

};

// plugin default settings

$.fn.slideshow.defaults = {

timeout: 4000,

speed: 1000

};


Example 39
Example 3

// private

function transition() {

var next = curr == (slideCount - 1) ? 0 : curr + 1;

// fadeOutcurr, fadeIn next

$($slides[curr]).fadeOut(opts.speed);

$($slides[next]).fadeIn(opts.speed);

// start timer again

setTimeout(transition, opts.timeout);

curr = curr == (slideCount - 1) ? 0 : curr + 1;

};


Example 310
Example 3

<script type="text/javascript"

src="jquery.metadata.js"></script>

<script type="text/javascript">

$.metadata.setType("attr", "data-jquery")

$(function() {

$('.slideshow').slideshow();

});

// $.fn.slideshow.defaults.speed = 500;

</script>

<body>

<div class="slideshow"

data-jquery ="{ timeout: 2000, speed: 300 }">

<imgsrc="images/beach1.jpg" />

...

</div>

<div class="slideshow">

<imgsrc="images/beach4.jpg" />

...

</div>

</body>


Tips

  • Learn the ‘core’ – don’t reinvent the wheel

    $.serialize()

    $.param()

    $().data(), $().removeData()

    $.trim()

    $.isFunction()

    Public vs private (functions and properties)

    Callbacks and this


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 < 2) {

log('terminating; too few slides:', els.length);

return;

}


Tips

  • If you publish a plugin...

  • Monitor the jQuery mailing list

  • Have thick skin (don't be defensive)

  • Respect your users


Thanks
Thanks!

http://jquery.malsup.com/tae/


ad