jQuery Toolkit: 5 Scripts Every UI Developer Needs

I build a lot of websites and I find myself using the same helper scripts over and over. Let’s face it—websites have a lot in common! Over the years I’ve refined these scripts and I’m collecting them here for others to use and share. You may not have found a need for these because you’re relying on jQueryUI for your widgets, but I’m finding that library to be out-of-date and too bloated for my use. Maybe it’s time we all rolled our own! I chose the following list based on how often I used them.

1. Clickable Box

The popularity of individual, styled content blocks on sites has created a need for an entire div to be clickable, not just the link or button within. Now that we have lost some of the browsers that didn’t support divs inside of anchors, and we use HTML5, which allows anchors to wrap block elements, we could simply wrap an anchor around the entire div. Unfortunately, things aren’t always that simple.

For example, your active element might be an input (form submit button) instead of an anchor. Or you might be dealing with a dynamic, repeating block of content that does not give you access to the link at the start of the output (in a WordPress loop, e.g.) You may want to keep the call-to-action button clickable for usability or accessibility purposes and you can’t wrap an anchor within another anchor.

We see this most often with promotional banners in responsive layouts, where composites of text, images and active links have replaced a single graphic to allow smart resizing.

The script for dealing with this is quite simple:

See the Pen Making a box clickable by Connie Finkelman (@pixelslave) on CodePen.21122

2. Tab Box

I’m constantly making tab boxes. I don’t like the fact that jQueryUI needs to add 5 classes to my tab wrapper, four classes to each tab and three classes to each content box. But what bothers me more is that the tabs’ style is accomplished using png background images. I’ve got nothing against pngs, but that’s old school. Browser support for gradients is good, but even so, that look is old-fashioned.

It’s so easy to make your own!

See the Pen Tab Box by Connie Finkelman (@pixelslave) on CodePen.21122

3. Accordion

This widget is such a core element that we require developers applying for a UI developer position in our organization to code one in under 15 minutes. It should take less than 10 minutes, but we add extra time for nerves. I like to use lists for this because of the strong sibling relationships they create, but you can easily adapt it to any structure.

See the Pen Accordion by Connie Finkelman (@pixelslave) on CodePen.21122

4. Modal Dialog

This is a basic dialog window that can be used for most messaging. If you have a very large amount of content in it you may have to add scrolling to the inner content. This dialog relies heavily on CSS, using JavaScript to open and close it and correct its positioning. It opens with its top left corner in the center of the page, so it must be moved half its height and width up and to the left to actually center it. This is done with negative margin, since position is already being used for the basic centering. Since it uses CSS to center, it automatically corrects itself when the window resizes, so no resize listener is required.

See the Pen Modal by Connie Finkelman (@pixelslave) on CodePen.21122

5. Tooltip

This is a script for replacing the browser’s tooltip with one that you can style in a more attractive fashion.

See the Pen Tooltip with caret by Connie Finkelman (@pixelslave) on CodePen.21122

Leave a Reply