Presentation is loading. Please wait.

Presentation is loading. Please wait.

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!

Similar presentations


Presentation on theme: "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!"— Presentation transcript:

1 jQuery Plugin Development By Mike Alsup

2 What is a plugin? Why Write One? A way to extend the core library A way to reuse code A way to contribute!

3 Agenda Quick Overview of Types Considerations, Rules, Conventions Diving In Tips Q&A

4 Types of Plugins Methods: Element-centric $(‘#myDiv’).myPlugin(); Psuedo Expressions Extend jQuery.expr[:] object Animations Extend jQuery.easing or jQuery.fx.speed

5 Considerations Host Environment Target Audience Other Libraries installed Older versions of jQuery Documentation Extensibility / Flexibility Interoperability Metadata plugin Easing plugin

6 “Rules” jQuery vs $ Don’t use the global ‘$’ Use ‘jQuery’ or a closure-protected ‘$’ Implicit iteration $(‘ ’).hide(); Iterate the nodeset Honor Chaining $().one().two() return “this” Semicolons Use ‘em

7 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

8 The Extension Point jQuery.fn jQuery.fn === jQuery.prototype jQuery.fn.myPlugin = function() …

9 Getting Started // a simple no-op plugin jQuery.fn.myPlugin = function() { }

10 Getting Started // a simple no-op plugin jQuery.fn.myPlugin = function() { // what is this? return this; }; Honor chaining

11 Getting Started // a simple no-op plugin jQuery.fn.myPlugin = function() { this.each(function() { // what is this? }); return this; }; Iterate the nodeset Honor chaining

12 Getting Started ;(function($) { // a simple no-op plugin $.fn.myPlugin = function() { this.each(function() {... }); return this; }; })(jQuery); $(‘#myDiv’).myPlugin(); Use a closure Iterate the nodeset Honor chaining

13 Example 1 Change the colors of an element when hovering over it.

14 Example 1

15 Example 1

16 Example 1 – cont. $(document).ready(function() { $('h1').hover( function() { $(this).addClass('highlight'); }, function () { $(this).removeClass('highlight'); } ); });

17 Example 1 – cont. $(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'); } ); });

18 Example 1 – cont.

19 Example 1 – cont. ;(function($) { })(jQuery); $(document).ready(function() { });

20 Example 1 – cont. ;(function($) { $.fn.hoverClass = function(c) { }; })(jQuery); $(document).ready(function() { });

21 Example 1 – cont. ;(function($) { $.fn.hoverClass = function(c) { return this.hover( function() { $(this).addClass(c); }, function () { $(this).removeClass(c); } ); }; })(jQuery); $(document).ready(function() { });... this.hover(function() {... }); return this;... this.hover(function() {... }); return this;... return this.hover(function() {... });... return this.hover(function() {... });

22 Example 1 – cont. ;(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'); });

23 Example 1 - jquery.hoverClass.js ;(function($) { $.fn.hoverClass = function(c) { return this.hover( function() { $(this).addClass(c); }, function () { $(this).removeClass(c); } ); }; })(jQuery);

24 Example 1 – complete... $(document).ready(function() { $('#main h1').hoverClass('highlight'); $('#sidebar h1').hoverClass('highlight2'); });...

25 Example 2 Submit a form using AJAX

26 Name: Comment: Example 2

27 Name: Comment:

28 ;(function($) { })(jQuery); Example 2

29 ;(function($) { $.fn.formlite = function() { }; })(jQuery); Example 2

30 ;(function($) { $.fn.formlite = function() { return this.submit(function() { }); }; })(jQuery); Example 2... this.submit(function() {... }); return this;... this.submit(function() {... }); return this;... return this.submit(function() {... });... return this.submit(function() {... });

31 ;(function($) { $.fn.formlite = function() { return this.submit(function() { var $form = $(this); }); }; })(jQuery); Example 2

32 ;(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); Example 2

33 ;(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); jquery.formlite.js

34 $(document).ready(function() { $('#form1').formlite(); }); Name: Comment: Example 2

35 Options

36 ;(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 2

37 ;(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 2

38 $(function() { $('#form1').formlite( { url: ‘test-ajax.php’ } ); }); Name: Comment: Example 2

39 More Options target success

40 ;(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 2

41 ;(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); Example 2

42 ;(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); Example 2 if (opts.success) opts.success.call(form, response); if (opts.success) opts.success.call(form, response); if (opts.success) opts.success(response); if (opts.success) opts.success(response);

43 $(function() { $('#form1').formlite({ target: '#response1' }); $('#form2').formlite({ success: onSuccess }); function onSuccess(response) { // this is the form element $('#response2').html(response); }; });...... Example 2

44 Example 3 A slideshow plugin

45 Example 3... $('.slideshow').slideshow();...

46 Example 3 $.fn.slideshow = function() { return this.each(function() { }); };

47 Example 3 $.fn.slideshow = function() { return this.each(function() { // ‘this’ is our slideshow container element var $this = $(this); var $slides = $this.children(); var curr = 0, slideCount = $slides.size(); }); };

48 Example 3 $.fn.slideshow = function() { return this.each(function() { // ‘this’ is our slideshow container element var $this = $(this); var $slides = $this.children(); var curr = 0, slideCount = $slides.size(); // hide all slides but the first $slides.each(function(i) { // 'this' is the slide element $(this)[i==0 ? 'show' : 'hide'](); }); }); };

49 Example 3 $.fn.slideshow = function() { return this.each(function() { // ‘this’ is our slideshow container element var $this = $(this); var $slides = $this.children(); var curr = 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 }); };

50 Example 3 $.fn.slideshow = function() { return this.each(function() {... function transition() { var next = curr == (slideCount - 1) ? 0 : curr + 1; // fadeOut curr, 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); }); };

51 Options timeout speed

52 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 };

53 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 || {}, $.metadata ? $this.metadata() : {});... }; // plugin default settings $.fn.slideshow.defaults = { timeout: 4000, speed: 1000 };

54 Example 3 // private function transition() { var next = curr == (slideCount - 1) ? 0 : curr + 1; // fadeOut curr, 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; };

55 Example 3

56 Tips Learn the ‘core’ – don’t reinvent the wheel $.serialize() $.param() $().data(), $().removeData() $.trim() $.isFunction() Public vs private (functions and properties) Callbacks and this

57 Tips 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; } Version your plugin $.fn.myPlugin.version = 1;

58 Tips If you publish a plugin... Monitor the jQuery mailing list Have thick skin (don't be defensive) Respect your users

59 Thanks! http://jquery.malsup.com/tae/


Download ppt "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!"

Similar presentations


Ads by Google