Finding and Evaluating Plugins

Contact Us or call 1-877-932-8228
Finding and Evaluating Plugins

Finding and Evaluating Plugins

Plugins extend the basic jQuery functionality, and one of the most celebrated aspects of the library is its extensive plugin ecosystem. From table sorting to form validation to autocompletion. If there's a need for it, chances are good that someone has written a plugin for it.

The quality of jQuery plugins varies widely. Many plugins are extensively tested and well-maintained, but others are hastily created and then ignored. More than a few fail to follow best practices.

Google is your best initial resource for locating plugins, though the jQuery team is working on an improved plugin repository. Once you've identified some options via a Google search, you may want to consult the jQuery mailing list or the #jquery IRC channel to get input from others.

When looking for a plugin to fill a need, do your homework. Ensure that the plugin is well-documented, and look for the author to provide lots of examples of its use. Be wary of plugins that do far more than you need; they can end up adding substantial overhead to your page. For more tips on spotting a subpar plugin, read Signs of a poorly written jQuery plugin by Remy Sharp.

Once you choose a plugin, you'll need to add it to your page. Download the plugin, unzip it if necessary, place it in your application's directory structure, then include the plugin in your page using a script tag (after you include jQuery).

The Mike Alsup jQuery Plugin Development Pattern

For more on plugin development, read Mike Alsup's essential post, A Plugin Development Pattern ( In it, he creates a plugin called $.fn.hilight, which provides a centralized method for setting global and instance options for the plugin. Any global options can be overridden by options passed in when an instance of the plugin is created, and, in turn, those options can be overridden by options present in the effected element's data.

The sample plugin, which has been modified slightly from the original, below highlights elements by setting foreground and background colors, and then wrapping the HTML in a <strong> tag.

Code Sample:

(function($) {

	// define plugin and add to $.fn
	$.fn.hilight = function(options) {

		// demonstrates use of private function

		// build main options before element iteration
		// extending built-in defaults with passed in options
		var opts = $.extend({}, $.fn.hilight.defaults, options);

		// iterate and reformat each matched element
		return this.each(function() {
			$this = $(this);

			// build element specific options from data stored for 
			// this element, extending current options local options
			var o = $.extend({}, opts, $;

			// update element styles
				backgroundColor: o.background,
				color: o.foreground

			var markup = $this.html();

			// call our format function
			markup = $.fn.hilight.format(markup);

	// private function for debugging
	function debug($obj) {
		if (window.console && window.console.log)
		window.console.log('hilight selection count: ' + $obj.size());

	// define and expose format function by adding it to $.fn.hilight
	$.fn.hilight.format = function(txt) {
		return '<strong>' + txt + '</strong>';

	// built-in defaults, also added to  $.fn.hilight
	$.fn.hilight.defaults = {
		foreground: 'red',
		background: 'yellow'


The line

var opts = $.extend({}, $.fn.hilight.defaults, options);

creates an object starting with the contents of defaults, and overriding with any values in options. We do this before we start processing any elements in the collection.

Then, for each individual element, we extend the options again with the data retrieved from the tag data, if any exists.

var o = $.extend({}, opts, $;

The markup function has been exposed by adding it to $.fn.hilight, meaning that you can replace it. The HTML page that uses this does that before the final application of the plugin.

The debug function has not been exposed, so it is only available within the plugin's code.