jQuery Plugins and jQuery UI Anatomy of a Plugin

Scott Gonzáles introduces himself and his qualifications for presenting the material. Visit http://scottgonzalez.com for details on his experience and where to follow him via social media, etc. Scott begins by creating a jQuery plugin from scratch by adding a method to $.fn. Any plugin will require iterating over selected DOM elements and chaining must remain intact. To ensure that a jQuery plugin is functionally chainable, it must contain return.this.each. Scott gives a live example using DOM elements inside your “each” callback to change text color to red. All jQuery plugins naturally apply implicit iteration to reduce the bulkiness of code. When implementing something simple, you could just use jQuery’s CSS method instead of iteration. It is imperative that chaining remains true when doing a traversal in your plugin. There are two methods of implementation - one that uses iteration and one that does not. You must compare functionality to ensure its correct application. Be careful if you are not using return.this.each to iterate because you may return an element that you didn’t intend to return. Return.this.each is the most reliable way to ensure you don’t break chaining. Remember to only change a return value if you mean to do it – but also take into consideration whether or not your users expect it. Example why never to add more than one level into a stack: Users won’t know what to do if .end doesn’t lead back to the original plugin.