1 / 59

jQuery Plugin Development

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!. Agenda. Quick Overview of Types Considerations, Rules, Conventions Diving In Tips Q&A. Types of Plugins.

margot
Download Presentation

jQuery Plugin Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. jQueryPlugin 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” • jQueryvs $ Don’t use the global ‘$’ Use ‘jQuery’ or a closure-protected ‘$’ • Implicit iteration $(‘<div>’).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); Use a closure Iterate the nodeset Honor chaining $(‘#myDiv’).myPlugin();

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

  14. Example 1 <html> <head> <script type="text/javascript" src="../jquery-1.2.6.js"></script> <style type="text/css"> </style> </head> <body> <div id="sidebar"> <div><h1>Heading One</h1>content ...</div> <div><h1>Heading Two</h1>content ...</div> <div><h1>Heading Three</h1>content ...</div> </div> <div id=“main"> <div><h1>Heading One</h1>content ...</div> <div><h1>Heading Two</h1>content ...</div> <div><h1>Heading Three</h1>content ...</div> </div> </body> </html>

  15. Example 1 <html> <head> <script type="text/javascript" src="../jquery-1.2.6.js"></script> <style type="text/css"> .highlight { background-color: #ffd } </style> </head> <body> <div id="sidebar"> <div><h1>Heading One</h1>content ...</div> <div><h1>Heading Two</h1>content ...</div> <div><h1>Heading Three</h1>content ...</div> </div> <div id=“main"> <div><h1>Heading One</h1>content ...</div> <div><h1>Heading Two</h1>content ...</div> <div><h1>Heading Three</h1>content ...</div> </div> </body> </html>

  16. Example 1 – cont. <script type="text/javascript"> $(document).ready(function() { $('h1').hover( function() { $(this).addClass('highlight'); }, function () { $(this).removeClass('highlight'); } ); }); </script>

  17. Example 1 – cont. <script type="text/javascript"> $(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'); } ); }); </script>

  18. Example 1 – cont. <script type="text/javascript"> </script>

  19. Example 1 – cont. <script type="text/javascript"> ;(function($) { })(jQuery); $(document).ready(function() { }); </script>

  20. Example 1 – cont. <script type="text/javascript"> ;(function($) { $.fn.hoverClass = function(c) { }; })(jQuery); $(document).ready(function() { }); </script>

  21. Example 1 – cont. <script type="text/javascript"> ;(function($) { $.fn.hoverClass = function(c) { return this.hover( function() { $(this).addClass(c); }, function () { $(this).removeClass(c); } ); }; })(jQuery); $(document).ready(function() { }); </script> ... return this.hover(function() { ... }); ... this.hover(function() { ... }); return this;

  22. Example 1 – cont. <script type="text/javascript"> ;(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'); }); </script>

  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 <html> <head> <script type="text/javascript" src=“jquery-1.2.6.js"></script> <script type="text/javascript" src="jquery.hoverClass.js"></script> <script type="text/javascript"> <style type=“text/css”> ... </style> $(document).ready(function() { $('#main h1').hoverClass('highlight'); $('#sidebar h1').hoverClass('highlight2'); }); </script> </head> <body> ...

  25. Example 2 Submit a form using AJAX

  26. Example 2 <form id="form1" action="test.php" method="POST"> Name: <input type="text" name="user" /> Comment: <input type="text" name="comment" /> <input type="submit" value="Submit" /> </form>

  27. Example 2 <form id="form1" action="test.php"method="POST"> Name: <input type="text" name="user" /> Comment: <input type="text" name="comment" /> <input type="submit" value="Submit" /> </form>

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

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

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

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

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

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

  34. Example 2 <html> <head> <script type=“text/javascript” src=“jquery.formlite1.js”></script> <script type=“text/javascript”> $(document).ready(function() { $('#form1').formlite(); }); </script> </head> <body> <form id="form1" action="test.php" method="POST"> Name: <input type="text" name="user" /> Comment: <input type="text" name="comment" /> <input type="submit" value="Submit" /> </form> </body> </html>

  35. Options

  36. Example 2 • ;(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);

  37. Example 2 • ;(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);

  38. Example 2 <html> <head> <script type=“text/javascript” src=“jquery.formlite.js”></script> <script type=“text/javascript”> $(function() { $('#form1').formlite( { url: ‘test-ajax.php’ } ); }); </script> </head> <body> <form id="form1" action="test.php" method="POST"> Name: <input type="text" name="user" /> Comment: <input type="text" name="comment" /> <input type="submit" value="Submit" /> </form> </body> </html>

  39. More Options • target • success

  40. Example 2 • ;(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);

  41. Example 2 • ;(function($) { • $.fn.formlite = function(options) { • return this.submit(function() { • varform = 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);

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

  43. Example 2 <html><head> <script type=“text/javascript” src=“jquery.formlite.js”></script> <script type=“text/javascript”> $(function() { $('#form1').formlite({ target: '#response1' }); $('#form2').formlite({ success: onSuccess }); function onSuccess(response) { // this is the form element $('#response2').html(response); }; }); </script> </head><body> <form id="form1" action="test.php" method="POST"> ... </form> <div id=“response1”></div> <form id="form2" action="test.php" method="POST"> ... </form> <div id=“response2”></div> </div></body> </html>

  44. Example 3 A slideshow plugin

  45. Example 3 ... $('.slideshow').slideshow(); ... <body> <div class="slideshow”> <imgsrc="images/beach1.jpg" /> <imgsrc="images/beach2.jpg" /> <imgsrc="images/beach3.jpg" /> </div> <div class="slideshow"> <imgsrc="images/beach4.jpg" /> <imgsrc="images/beach5.jpg" /> <imgsrc="images/beach6.jpg" /> </div> </body>

  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(); varcurr = 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(); varcurr = 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(); varcurr = 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; // fadeOutcurr, 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); }); };

More Related