jQuery Tools: The missing UI library for the Web

jQuery Tools is a collection of the most important user interface components for the web. These are tabs, accordions, tooltips, overlays and scrollables. They can dramatically improve the usability and responsiveness of your site. They mainly focus on presenting information and visual appeal. After all, this is exactly what most websites desperately want: to present their content to the reader in an easy and visually pleasing manner. Other JavaScript UI libraries focus on desktop-like features such as drag-and-drop, sliders, sortable tables or draggable windows. They are meant to build "rich internet applications" (RIAs) such as email clients, task managers, image organizers or feed viewers. Websites are not desktop applications. They are different. The most exiting fact about this library is that it is a single JavaScript file weighs only 5.59 Kb! This file can be included on your pages from free Content Delivery Network (CDN) so that it will be loaded to your customers fast no matter where they are on the globe. You don't need to be a programmer to use these tools. and you can copy their source code to your site and things will work. Each tool is used in a similar manner and by learning one tool you can easily learn the other tools. This tutorial introduces some of the basic functionalities from each tool. We only scratch the surface here. If you want to see more jQuery Tools website offers lots of demos to explore. jQuery Tools is open source and dual licensed under MIT and GPL 2+ licenses.

jQuery Tools / Overlay

Let's begin with the Overlay tool. It can be used to overlay any kind of HTML on top of the main document in various ways. Overlaying HTML on top of the main document is one of the most common features in today's websites. You need different kinds of overlays for different situations such as:

1. Great looking overlays for displaying your products.
2. Simple and snappy overlays for showing info or warning boxes.
3. Modal dialogs for prompting and alerting users.
4. "lighbox" style image galleries.

This tool handles all these different situations by offering a flexible effect framework. You can use the effect that is most suitable for the situation at hand.

HTML setup

Here is the HTML setup for the example above.

<!-- 
  trigger for the overlay. 
  the overlayed element is specified in rel- attribute 
-->
<img id="overlaytrigger" src="img/gustavohouse.jpg" rel="#overlay"/>


<!-- overlayed element, everything is styled with external stylesheet -->
<div id="overlay">
   <img src="img/gustavohouse-medium.jpg" />

   <div class="details">
      <h2>Berlin Gustavohouse</h2>

      <p>
         The Gustavo House in Storkower Strasse. It was built in 1978 
         and reconstructed in 1998 by the Spanish artist Gustavo.
      </p>
   </div>

</div>

JavaScript setup

// select elements and make them trigger an overlay
$("#overlaytrigger").overlay({effect: 'apple', expose: '#004C7D'});

You select one (or more) elements from the document to be overlay triggers with a jQuery selector. After that you call the overlay initialization function with various kind of configuration options. expose configuration property specifies the color of the "mask" that is placed on top of the document. effect property specifies the show/hide effect to be used. If you want to understand this setup fully we recommend that you study the minimal setup for overlay. Here is another demo that shows you an Apple effect for overlay.

jQuery Tools / Tooltip

Tooltips are one of the most important JavaScript widgets on the web. Although important, they also happen to be a very badly misunderstood and poorly implemented component. This tool corrects the situation. You'll get a professional piece of sofware that is easy to understand and use.

HTML setup

All you need is the trigger elements and a tooltip element. All aspects can be styled with CSS:

<!-- a couple of trigger elements -->
<div id="tooltips">
	<img src="img/tooltip/1.jpg" title="My tooltip #1"/>

	<img src="img/tooltip/2.jpg" title="My tooltip #2"/>

	<img src="img/tooltip/3.jpg"  title="My tooltip #3"/>
</div>

<!-- the tooltip -->
<div id="tooltip"> </div>

JavaScript setup

// select elements that will have tooltips
$("#tooltips img").tooltip({
	tip: '#tooltip', 
	offset: [-15, 2], 
	effect: 'slide'}
	
// use dynamic plugin to take care of the repositioning of the tip
).dynamic();

Here is the minimal setup for tooltip. Here we use the tooltip tool together with a dynamic plugin which takes care of tooltip repositioning if it does not fit into the browsers viewport. Just like the Overlay tool Tooltip also has an effect framework where you can specify how the tooltip is shown/hidden. If you master JavaScript you can make your own effects.

jQuery Tools / Tabs

Tabs are definitely the most popular user-interface component on the web. And for good reason: they are intuitive to use, people are used to them, and above all your can organize your pages in a more user-friendly way. It can load pane contents from the server, supports different kind of effects and has a solid plugin framework. You can also use browser's back/forward buttons to navigate between the tabs.

HTML setup

We have the tabs and the container for the content. The content area is called a "pane". Again. Everything can be styled with css.

<!-- tabs --> 
<ul class="tabs"> 
    <li><a href="#page1">Tab 1</a></li> 
    <li><a href="#page2">Second tab</a></li> 
    <li><a href="#page3">Third tab</a></li> 
</ul> 
 
<!-- tab panes --> 
<div class="panes">
	
	<div> .. content #1 ..</div>
	<div> .. content #2 ..</div>
	<div> .. content #3 ..</div>
	
</div>

JavaScript setup

$("ul.tabs").tabs("div.panes > div").history();

We select one or (more) tabs and the associative panes. history plugin takes care of the browsers' back/forward buttons. If you want to understand this setup fully we recommend that you study the minimal setup for tabs.

jQuery Tools / Scrollable

Scrolalble makes it easy to add customized scrolling functionalities to a website. Whenever you wish to scroll HTML elements in a visually-appealing manner, this is the tool you need. Here are some example scenarios where you would benefit from using the library:

• Product catalogues
• News tickers
• Custom select boxes in forms
• Image galleries
• Video playlists
• All kinds of navigational systems

HTML setup

<!-- "previous page" action --> 
<a class="prevPage browse left"></a> 
 
<!-- root element for scrollable --> 
<div class="scrollable">     
     
    <!-- root element for the items --> 
    <div class="items"> 
     
        <!-- scrollable items ... --> 
        <img src="image1.jpg" />
        <img src="image2.jpg" />
        <img src="image3.jpg" />
        <img src="image4.jpg" />
        ... 
    </div> 
     
</div> 
 
<!-- "next page" action --> 
<a class="nextPage browse right"></a>

JavaScript setup

$("div.scrollable").scrollable().navigator().mousewheel();

Select one (or more) scrollables from the page and make them scrollables. Supply the amount of the visible items in the configuration. We use a navigator plugin for scrollable to place those little navigation "dots" above the scrollable and a mousewheel plugin to enable scrolling with the mousewheel. Look for more detailed explanation of the scrollable setup from jQuery Tools website. Note that every single element of the above setup can be modified. This includes the behaviour and styling. You can also make vertical scrollables.

jQuery Tools / Flashembed

Today the role of JavaScript is rising on a tremendous speed. All major browser vendors are competing with each other to make the best JavaScript engine in the world. We can expect to see more and more JavaScript widgets and goodies to appear on the market. Not just these tools. Having said that Flash technology still has an imporant role on the Internet. Especially when you want to play videos there is virtually no competition. Flashembed is a JavaScript tool that you can use to embed Flash objects on your website. There are other tools for embedding Flash objects, but none of them offers the same flexibility and ease of use as this one. Here we have installed three Flash objects with a simple one-liner:

$("a.clock").flashembed("clock.swf");	

And here is our HTML setup.

<a class="clock"></a>
<a class="clock"></a>
<a class="clock"></a>

The result Very powerfull.

Conclusion

It is recommended that you start designing your pages without using any JavaScript. There are many examples of highly functional, good looking and user friendly web sites that are not using JavaScript. The purpose of this library is to enhance an existing site with the great possibilities that modern JavaScript techniques has to offer. This is essentially the idea of "progressive enhancement" which is a common design pattern today. You should realize that highly professional sites don't overuse JavaScript just for the fun of it. Scripting is only used when it truly makes the pages more readable and user friendly. This is where these tools comes in to play. jQuery Tools is not a framework with a steep learning curve, lots of preliminary work and strict coding rules. You are not tied to any predefined HTML or CSS structures. You can include the library on your pages and start using it immediately. You can freely design the look and feel of your site or you can use the desing we have on our demos as a template. These tools can be easily combined. Think of scrollables that trigger overlays or overlays that contain scrollables together with tooltips or whatever combination you can imagine. The possibilities are endless. And if that is not enough, you can harness the enormous power of the jQuery library. Many times you see complex JavaScript components implemented that could be done with just a few lines of jQuery code. For many websites, this may be the only JavaScript library necessary.

The old UNIX design philosophy "tools, not policy" is very important in web design.