jquery plugin development
Download
Skip this Video
Download Presentation
jQuery Plugin Development

Loading in 2 Seconds...

play fullscreen
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
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>

slide16

Example 1 – cont.

<script type="text/javascript">

$(document).ready(function() {

$(\'h1\').hover(

function() {

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

},

function () {

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

}

);

});

</script>

slide17

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>

slide18

Example 1 – cont.

<script type="text/javascript">

</script>

slide19

Example 1 – cont.

<script type="text/javascript">

;(function($) {

})(jQuery);

$(document).ready(function() {

});

</script>

slide20

Example 1 – cont.

<script type="text/javascript">

;(function($) {

$.fn.hoverClass = function(c) {

};

})(jQuery);

$(document).ready(function() {

});

</script>

slide21

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;

slide22

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>

slide23

Example 1 - jquery.hoverClass.js

;(function($) {

$.fn.hoverClass = function(c) {

return this.hover(

function() {

$(this).addClass(c);

},

function () {

$(this).removeClass(c);

}

);

};

})(jQuery);

slide24

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>

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

$.serialize()

$.param()

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

$.trim()

$.isFunction()

Public vs private (functions and properties)

Callbacks and this

slide57
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;

}

slide58
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