JQuery_ Novice to Ninja - Earle Castledine [133]
Speaking of the plugin repository—that’s one of the last legs in our jQuery journey. In the next chapter, you’ll learn how to take all this fantastic functionality you’re building and make it available to the whole world, in plugin form. We’ll also cover a few other advanced topics to round out your jQuery ninja training nicely!
Chapter 9
Plugins, Themes, and Advanced Topics
jQuery, like the game of chess, or any version of Tetris, is simple to learn but difficult to master. Thanks to its seamless integration with the Document Object Model, jQuery feels natural and easy to use. But jQuery is a quiet achiever: it doesn’t like to brag about it, but under the hood lies an extensible architecture, a powerful event handling system, and a robust plugin framework.
Plugins
“Hey, now that everything’s in place—can you just go back and put that menu from phase three into the admin section? And can you add the cool lists you made in the last phase to those lists on the front end—and add the scroller effect you did … you can just copy and paste the code, right?”
Ah, copy/paste: our good friend and worst enemy. Sure, it may seem like a quick way to get a piece of functionality up and running—but we all know that this kind of code reuse can so easily degenerate into our worst JavaScript nightmares. And we can’t let that happen to our beautiful jQuery creations.
You’ve seen throughout the book how extremely useful the jQuery plugin architecture is. We’ve made use of all manner of third-party creations—from styleable scrollbars, to shuffling image galleries, to autocompleting form fields. The good news is that it’s extremely easy to package your code as a plugin for reuse in your other projects—and, if your code is really special, in other developers’ projects as well!
Creating a Plugin
It will only be a short time into your jQuery-writing life before you have the urge to turn some of your code into a plugin. There’s nothing better than seeing a bit of your own code being called from the middle of a jQuery chain! The best part is that it’s a very simple process to convert your existing jQuery into a plugin, and you can make it as customizable as you like.
Setting Up
Before we start, we need an idea for our plugin. Some time ago the client mentioned that he’d like to highlight all the text paragraphs on the page, so that when users moved their mouse over the paragraphs, text would become unhighlighted to indicate it had been read. While you’ll agree it’s far from being the best user interface idea, it’s sufficiently simple to demonstrate how to make a plugin, without having to concentrate on the effect’s code itself.
All we have to do to make a plugin callable like regular jQuery actions is attach a function to the jQuery prototype. In JavaScript, the prototype property of any object or built-in data type can be used to extend it with new methods or properties. For our plugin, we’ll be using the prototype property of the core jQuery object itself to add our new methods to it.
The safest (only!) way to do this is to create a private scope for the jQuery function. This JavaScript trick ensures that your plugin will work nicely, even on pages where a person is using the $ function for non-jQuery purposes:
(function($) {
// Shell for your plugin code
})(jQuery);
This code can go anywhere in your script, but standard practice is to put it in a separate JavaScript file named jquery.pluginname.js, and include it as you’d include any plugin. Now that you have a stand-alone file, you can easily use it in future projects or