Introduction to Developing jQuery Plugins

You've probably worked on interactive components before, like sliders, galleries or interactive forms. While you might be creating these on a site-by-site basis, one great time saver is to build your functionality as a jQuery plugin to speed up your development.

jQuery plugins let you define your functionality once and then drop it into your projects as needed, getting you up and running faster.

We're going to look at how to build your own jQuery plugin. We'll look at all the areas you need to know to get you up and running building plugins in no time.

We'll be using a plugin I've created called fancytoggle to showcase the different parts of a plugin. It's a simple plugin for toggling the visibility of nested elements, such as list items, to create accordion-style widgets for things like FAQs. The overall idea is about the concepts of plugins, but this example should help you see how it all works in practice.

See the Pen FancyToggle by SitePoint (@SitePoint) on CodePen.

A Plugin Approach: The Advantages

The core concept here is to create something extensible that you can add to your projects to give you quick functionality. jQuery's plugin functionality simplifies the process of building reusable code.

One of the strengths of these plugins is that they let the developer define several options that can be used to customize the functionality. You might create several options that change the way your plugin operates entirely, or you might just define a few to give the user a bit more control for styling or layout. With plugins, this choice will be up to you.

Developing jQuery Plugins

Let's run through the steps needed to register a new jQuery plugin. We'll use our example plugin, fancyToggle, so you can see how it's all put together.

Creating our function with $.fn

jQuery plugins work by registering a function with the name you want to call to trigger your plugin (for example, you call jQuery's inbuilt .width() or .height() functions when you want the width / height returned)

We attach our function to jQuery's $.fn object to make it available to the global $ object. This registers our function and lets it be called on objects or selections.

//registering our function
$.fn.fancytoggle = function(){
  // ...
};

That's all there is to it! You now have a new method you can call from jQuery's $ object. Right now, it won't do anything, but you can call this method wherever you like, for example on a selector:

//Call fancytoggle on this element
$('.my-element').fancytoggle(); 

You can register as many functions as you want with $.fn, however its good practice to avoid registering more than one function unless the plugin does distinctly different tasks.

Multiple collections and looping

An important thing to understand is that when your plugin is called it might be applying itself to either a single element or to several. For example with our plugin, if we are applying fancytoggle() to several different items we will have a collection to process within our function.

To process each element we just need to loop through the collection using jQuery's $.each function:

Continue reading %Introduction to Developing jQuery Plugins%

by Simon Codrington via SitePoint