Building Robust jQuery Plugins

Why bother?

$.each({
focus: 'focusin',
blur: 'focusout'
}, function( original, fix ){
$.event.special[fix] = {
setup:function() {
if ( $.browser.msie ) return false;
this.addEventListener( original, $.event.special[fix].handler, true );
},
teardown:function() {
if ( $.browser.msie ) return false;
this.removeEventListener( original,
$.event.special[fix].handler, true );
},
handler: function(e) {
arguments[0] = $.event.fix(e);
arguments[0].type = fix;
return $.event.handle.apply(this, arguments);
}
};
});

Don't reinvent the wheel

“ Given enough eyeballs, all bugs are shallow ” -- Eric S. Raymond

Infrastructure

Design

Consider the audience

jQuery.validator. addMethod ("domain", function(value) {
return /^http://mycorporatedomain.com/.test(value); }
, "Please specify the correct domain");
jQuery.validator.addMethod("nowhite", function(value) {
return /^S+$/.test(value);
}, "No white space please");
jQuery.validator.addMethod("nowhite", function(value) {
return /^d+$/.test(value);
}, "Please enter only digits");

Test-driven development

Tests first

Behaviour-driven developement

Why bother?

test("my ajax code", function() { expect(1); stop(); $.get("myurl", function(response) { equals(response, "expected response"); start(); }); });

Implementing

(function($) { $.fn.plugin = function() { return this.each(function() { // your code here }); }; })(jQuery);

(function($) { $.fn.plugin = function(settings) { settings = $.extend({}, $.plugin.defaults, settings); return this.each(function() { // your code here }); }; $.plugin = { defaults: {} }; })(jQuery);

Document

/**
* The number of elements currently matched.
*
* @example $("img").length;
* @before <img src="test1.jpg"/> <img src="test2.jpg"/>
* @result 2
*
* @property
* @name length
* @type Number
* @cat Core
*/
/**
* The number of elements currently matched.
*
* @example $("img").size();
* @before <img src="test1.jpg"/> <img src="test2.jpg"/>
* @result 2
*
* @name size
* @type Number
* @cat Core
*/
size: function() {
return this.length;
},
length: 0,

Purpose

Dependencies

Pulic API

Options

Examples

Browsing

Release

jquery.plugin-1.2.3.zip - jquery-plugin-1.2.3 jquery.plugin.js jquery.plugin.min.js jquery.plugin.pack.js - demo [-docs] [-test]

<target name="tooltip"> <antcall target="generic"> <param name="name" value="tooltip" /> </antcall> </target> ant tooltip

1.3 --- * Added fade option (duration in ms) for fading in/out tooltips; IE <= 6 is excluded when bgiframe plugin is included * Fixed imagemaps in IE, added back example * Added positionLeft-option - positions the tooltip to the left of the cursor * Remove deprecated $.fn.Tooltip in favor of $.fn.tooltip 1.2 --- * Improved bodyHandler option to accept HTML strings, DOM elements and jQuery objects as the return value * Fixed bug in Safari 3 where to tooltip is initially visible, by first appending to DOM then hiding it * Improvement for viewport-border-positioning: Add the classes "viewport-right" and "viewport-bottom" when the element is moved at the viewport border. * Moved and enhanced documentation to docs.jquery.com * Added examples for bodyHandler: footnote-tooltip and thumbnail * Added id option, defaults to "tooltip", override to use a different id in your stylesheet * Moved demo tooltip style to screen.css * Moved demo files to demo folder and dependencies to lib folder * Dropped image map example - completely incompatible with IE; image maps aren't supported anymore

Maintain

Avoid Blog Comments

Mailing list

General questions

Tracking

Thank you

Questions?

Bon appétit!

http://iurzelai.wordpress.com	14
http://www.slideshare.net	8
http://onwebdev.blogspot.com	3
http://wildfire.gigya.com	2

Building Robust jQuery Plugins

by Jörn Zaefferer on Oct 04, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 27

Statistics

Building Robust jQuery Plugins — Presentation Transcript