Basics of Plug-ins and CSS3 - dummies

Basics of Plug-ins and CSS3

By John Paul Mueller

Plug-ins extend the CSS3 libraries to perform tasks that the original author didn’t consider or that require some special level of expertise to implement. You can find a vast array of plug-ins for jQuery and jQuery UI. It really does pay to search for a plug-in should you need to do something that jQuery or jQuery UI don’t do natively.

In this case, the example extends one of the widgets. Users need to enter time values as well as date values. The jQuery UI library comes with a Datepicker widget, which is fine but not quite enough for modern applications where users have to modify the time independently of the date.

Fortunately, there’s a solution in the form of a third-party plugin on the Trent Richardson site. To use this plugin, you add the following reference to your code.


All you need to do is add a simple <input> tag to your code and provide an id value for it. This widget has a number of forms. For example, you can request both a date and time if desired. The simplest form is to request the time by using the following code:


As with most widgets, you can configure the Timepicker by using various options — and they’re considerable. There aren’t any events to handle except those provided natively by jQuery UI. The default settings present a 24-hour clock, but you can override the presentation and use a 12-hour clock, if desired.


There are many locations online with one, two, or even twenty jQuery or jQuery UI plug-ins. However, few sites have the number of plug-ins supported by Unheap. At the time of this writing, you can find 699 different plug-ins listed on this site, which are listed over 47 pages.

You can find all sorts of interesting plug-ins, such as TextFit, a plug-in that helps you fit text into a container without doing a lot of measurement work yourself. The plug-in ScrollTo creates a smooth scrolling setup so users don’t see the usual jittery interface every time the page scrolls for some reason.

There are whole categories of plug-ins devoted to just one widget, such as the Accordian. If you want to include social media on your site, you can find a number of plug-ins to do that, too on Unheap. The point is that if you want a single site to explore for plug-ins, this would be a good choice.

Hovering the mouse cursor over an entry tells you more about it and displays two buttons:

  • Demo: Click this button to access the demo that each of the plug-ins provide so you can try it before downloading it. Many of the plug-in demo pages include coding examples so you can see how the author implemented a particular behavior. Most demos rely on JavaScript, so you must enable JavaScript support to see the demo work.

  • Launch: After you decide to use a particular plug-in, click Launch to gain access to it. The browser will go to a page where you can download the plug-in and the latest documentation for it.

Trying to find what you need could be daunting on such a large site. Fortunately, the content is organized into categories, such as Interface, and subcategories, such as Layout. All you need to do is click the grouping level that makes the most sense for the kind of plug-in you need.