Using a jQuery Plugin

Problem

You’ve made use of jQuery in all of your applications, but it doesn’t support some func‐
tionality you need, such as sliding an element in from the side of the web page, or
providing a color animation.

Solution

Use a jQuery UI plugin to provide the additional functionality. I’m
using the jQuery UI Toggle plugin to show and hide a block of text based on a button
clicked event. The effect I’m using is fold, which creates a nice paper fold effect as the
content is shown. I’m also starting with the block hidden with the style setting on the
element, with a value of display: none

EXPLAIN

jQuery is a slim library providing core functionality that allows us to manipulate the
DOM simply and easily. To keep it slim, any additional functionality is added via plugins,
each of which are created to work within the jQuery infrastructure.

The jQuery UI is a set of plugins and is probably one of the better known jQuery ex‐
tensions. As the name implies, we can use it to create a nice variety of visual effects to
add some liveliness to the page—and without having to spend days coding the effect.

In the solution, the code links to a stylesheet, as well as two JavaScript libraries: the
primary jQuery library, and the jQuery UI. The stylesheet ensures that the effects meet
our expectations, as the jQuery UI plugins are all involved with appearance.

Why Not Just Use HTML5 and CSS3 for Managing Visual Effects?

Some of the functionality in jQuery and the plugins is now implemented declaratively
in HTML5 and CSS3. Declarative functionality is the ability to specify what we want,
and it just happens. Instead of having to code a transition, we declare it in CSS and trust
that the browser handles the transition properly.
The following CSS modifies the extra div element.

Now, when the
mouse cursor is over the element, it shrinks until disappearing completely. Move the
mouse cursor out, and it transitions back to its full size:

The advantage to this approach is it works even if JavaScript is turned off. And the
browser developers can optimize the transition effect—increasing both the efficiency
and the overall appearance of the effect. It seems like a win-win.
The limitation to using CSS3/HTML5 is trying to trigger the effect based on the button’s
click event. In addition, you don’t have complete control over appearance or effect.

This is particularly true with HTML5 elements.
If you’re using the new HTML5 input elements, such as date, the browser creates the
appropriate container, but you’ll find that the container’s appearance can differ dra‐
matically from browser to browser. Firefox just provides a field, while Opera pops up a
calendar picker when you click in the field.

The color input pops up the system color
picker in Firefox and Chrome, but an odd drop-down color picker in Opera.
If it’s important for appearance and behavior to be consistent across all agents and in
all environments, depending on the declarative power of HTML5 and CSS3 is probably
not going to be the best option.

They can be a useful addition, but not a complete
replacement.

Plugin? Or Plug-in?

I use both “plug-in” and “plugin” in the book. The proper word usage is plug-in, hy‐
phenated, but as you’ll notice, many communities (e.g., the jQuery community) use
plugin without hyphenation. Eventually, I expect plugin without the hyphenation to
become the standard.

Ultimately, though, we all know what we’re talking about, so use whatever is comfortable
for you, or whatever maps to what the community uses.