I was googling around for an open source video player to embed video streams into my web pages and found the Flowplayer, a powerful video player that offers advanced streaming technologies such as bandwidth detection, clustering and secure streaming.

It was then I discovered jQuery Tools,  an user-interface library developed by the same team that creates Flowplayer. This library consists of 6 most useful user-interface components packed in single Javascript file that weighs only 5.72 kb.

Using the Tools with other plugins and libraries

jQuery Tools can be used together with other libraries and plugins such as MooTools, Ext JS or Prototype.

Browser Support

jQuery Tools have been proven to work with following browsers:
Firefox 2.0+, Internet Explorer 6+, Safari 3+ , Opera 9+, Chrome 1+

1. Tabs

Tabs play a big role in creating user-friendly and well-organized websites. It can be easily implemented using jQuery Tools.

Example 1 : Basic Horizontal Tabs

Example 2 : Mouse over to switch tabs

View more demos with detailed explanation

2. Tooltip

Tooltips are usually small, boxed text that pop-up when a user hovers the triggers (image, button, div etc) .

Example 1 : Tooltip triggered by Image tag

Example 2 : Using tooltips in form fields

View more demos with detailed explanation

3. Overlay

Overlaying HTML elements allows you to highlight the important parts of your website to your users. It can also be used to  prompt an action from your users by fading out the rest of the content in the main document.

Example 1 : Using Overlay for Gallery

Example 2 : Prompting user input

View more demos with detailed explanation

4. Expose

Make your HTML elements stand out by fading out the surrounding elements with the expose tool. This is something similar to Overlay components.

Example 1 : Exposing a form

Example 2 : Exposing a video with custom mask

View more demos with detailed explanation

5. Scrollable

Scrollable is the most successful tool in this library. It allows you to scroll your HTML in many ways:-

1. Clicking the elements
2. Clicking the control buttons
3. Using your mouse scroll wheel
4. Using the left and right arrow keys from your keyboard

Example 1 : Gallery using scrollable

Example 2 : Tabs using scrollable components

View more demos with detailed explanation

6. Flashembed

With the role of Javascript is rising at a fast pace, we are not surprise that it will be employed to embed Flash objects.

Example 1 : Embedding multiple Flash objects

Example 2 : Embedding Flash Movie and Placing HTML on top of it

View more demos with detailed explanation