Building Robust jQuery Plugins

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 <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,

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. <target name="tooltip"> <antcall target="generic"> <param name="name" value="tooltip" /> </antcall></target>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.tooltip1.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