Noupe Editorial Team September 28th, 2009

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. jQuery Tools. The missing UI library for the Web 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. Tooltips in action
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. Tabs in action
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
Scrollable in action
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 jQuery Tools / Flashembed in action 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.

Author: Tero Piirainen

Tero Piirainen is the author of jQuery Tools. He has been "abusing" JavaScript and jQuery for several years.

Noupe Editorial Team

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

30 comments

  1. Doesn’t the jQuery UI library provide tabs capability? Thickbox also provides light-boxed content. What are the advantages of using these over using pre-existing solutions?

    I would certainly consider using the library just for the tool-tips. They look great!

    1. jQuery UI provides tabs… But if you want only tabs it’s ~122kb with UI, whereas it’s ~3kb with jQuery Tools.

      UI really isn’t so good for normal web pages because it’s so heavy, it’s meant more for web apps.

      1. At [http://flowplayer.org/tools/download.html] There are 2 downloads, one that include jQuery library which is the official one. and a tiny one that don’t include jQuery at the bottom of that link.

  2. Great jQ Library!

    Q1) USEFUL SUGGESTION:
    – could you include a link
    to a single ZIP file,
    with all the “stand-alone” DEMO pages?

    Q2) I noticed the following commented line,
    in the source of the “Overlay Simple Demo” page:

    “…cdn.jquerytools.org is available until the end of 2010 for testing…”.

    Does this mean that the JQ Tools Lib site
    and the DEMO pages,
    will only be available on the web until the end of 2010?

    Thanks!! Appreciate your effort.
    SFdude

  3. Just another note to say that the jQuery Tools CDN is for demo use only, and it won’t be available forever (they’re paying for it anyway) – they don’t recommend it for a production environment. So enjoy the CDN while it lasts, but you’ll have to eventually host the Tools library locally.

  4. The jQuery Tabs suffer from an ailment common to most tabs – the fail if JavaScript is turned off. With JS off, or even when printing, the content for ALL the tabs should be visible (and the tabs themselves should be hidden).

    To this end, it is important to use *classes* to show and hide the tab content, and not the “display” style. Classes can be over-ridden and handled in different ways (e.g. so that the tab content is hidden when JS is available, and not hidden otherwise, using appropriate selectors). The “display” inline style is a very clumsy way to handle it, and much less flexible.

    For examples, see how The Guardian handles their tabs when displaying, printing, and with JS on and off. They all work.

    — Jason

Leave a Reply

Your email address will not be published. Required fields are marked *