Download presentation
Presentation is loading. Please wait.
Published byLaurel Walton Modified over 10 years ago
1
Building Robust jQuery Plugins
2
Why bother?
3
$.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); } }; });
4
Don't reinvent the wheel
5
“ Given enough eyeballs, all bugs are shallow ” -- Eric S. Raymond
6
Infrastructure
7
Design
8
Consider the audience
12
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");
14
Test-driven development
17
Tests first
18
Behaviour-driven developement
19
Why bother?
20
QUnit
21
test("my ajax code", function() { expect(1); stop(); $.get("myurl", function(response) { equals(response, "expected response"); start(); }); });
22
Implementing
23
(function($) { $.fn.plugin = function() { return this.each(function() { // your code here }); }; })(jQuery);
24
(function($) { $.fn.delegate = function(type, delegate, handler) { return this.bind(type, function(event) { var target = $(event.target); if (target.is(delegate)) { return handler.apply(target, arguments); } }); }; })(jQuery);
25
(function($) { $.fn.plugin = function(settings) { settings = $.extend({}, $.plugin.defaults, settings); return this.each(function() { // your code here }); }; $.plugin = { defaults: {} }; })(jQuery);
26
Document
27
/** * The number of elements currently matched. * * @example $("img").length; * @before * @result 2 * * @property * @name length * @type Number * @cat Core */ /** * The number of elements currently matched. * * @example $("img").size(); * @before * @result 2 * * @name size * @type Number * @cat Core */ size: function() { return this.length; }, length: 0,
28
Purpose
29
Dependencies
30
Puplic API
31
Options
32
Examples
33
Browsing
35
Release
36
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]
37
ant tooltip
38
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
41
Maintain
42
Avoid Blog Comments
48
Mailing list
51
General questions
52
Tracking
53
Questions?
54
Thank you
Similar presentations
© 2025 SlidePlayer.com Inc.
All rights reserved.