Presentation is loading. Please wait.

Presentation is loading. Please wait.

Building Robust jQuery Plugins. Why bother? $.each({ focus: 'focusin', blur: 'focusout' }, function( original, fix ){ $.event.special[fix] = { setup:function()

Similar presentations


Presentation on theme: "Building Robust jQuery Plugins. Why bother? $.each({ focus: 'focusin', blur: 'focusout' }, function( original, fix ){ $.event.special[fix] = { setup:function()"— Presentation transcript:

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

9

10

11

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

13

14 Test-driven development

15

16

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

34

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

39

40

41 Maintain

42 Avoid Blog Comments

43

44

45

46

47

48 Mailing list

49

50

51 General questions

52 Tracking

53 Questions?

54 Thank you


Download ppt "Building Robust jQuery Plugins. Why bother? $.each({ focus: 'focusin', blur: 'focusout' }, function( original, fix ){ $.event.special[fix] = { setup:function()"

Similar presentations


Ads by Google