I found jQuery Tools the other days and have been looking into what it is. I decided that it is pretty interesting and worth writing a dedicated post about. jQuery Tools is a collection of six very useful and great looking user-interface components.
“The beauty of this library is that all of these tools can be used together, extended, configured and styled. In the end, you can have hundreds of different widgets and new personal ways of using the library.”
Documentation of the jQuery Tools library is good and way above what you would expect from a free set of jQuery plugins.
Recommended articles for you:
Tabs are very popular user-interface components 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.
- An effect framework which can be used to implement vertical accordions, horizontal accordions and more.
- Built-in effects which include: default, fade, slide, ajax and horizontal and you can easily make your own effects or modify the existing default effects.
- Plugin framework Built-in plugins include: jquery-tools-lib and history and you can easily make your own plugins.
- Cross linking. If the tab content areas contain any anchor links to other tab’s content areas, the correct tab is automatically opened when those links are clicked.
There are many demos to get you started here is an example of tabs with mouse over switch.
- Minimal setup for tabs
- Naming the tabs
- 4 different skins with CSS
- Loading tab contents with AJAX
- Handling browsers back button
- AJAX:ed tabs with History support
- Using mouseover to switch tabs
- Making Wizards with the Tabs
- Making Accordions with the Tabs
- Customizing the Accordion effect
- Horizontal Accordion using the Tabs
- Multiple Tabs and Accordion instances
- Slideshow plugin for the Tabs
The jquery-tools-lib plugin provides an automatic switching between tabs. It advances to the next tab in pre-configured intervals.
History plugin enables history support for the tabs. This means that when the user clicks on the browser’s back and forward buttons, the tool will navigate between the tabs and will not jump to another page.
Tooltips are important gui elements and they 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. Here are the highlights of this tool:
- Appearance and dimensions can be tweaked with CSS.
- The tooltip can contain any HTML such as images, tables and forms or it will generate tooltips from each element’s title attribute as in the demo above.
- You have full control over the positioning.
- There is an improved event management system for controlling when the tooltip will be shown or hidden.
- You can move the cursor on top of the tooltip so you can use links or form inside it
- You can control the tooltip timings before and after your mouse moves over the trigger element.
- Pluggable effects. Tooltip comes with two build-in effects: toggle, and fade and one separate effect: slide and you can easily build your own effects.
- A dynamic plugin will dynamically change the tooltip’s position so that it always stays in the viewport.
- Basics of using the tooltip
- Using any HTML inside the tooltip
- Imitating browsers default tooltip
- Using tooltips in form fields
- Using tooltips in tables or lists
- Custom tooltip effect
- Dynamic positioning of the tooltip
The slide effect makes your tooltips slide. Move your mouse over the download button below and you can see it in action:
This is using the dynamic plugin which repositions the tooltips so that they are always visible in the viewport.
The purpose of this library is to make it extremely easy to add scrolling functionality to a website. Besides clicking on the tabs you can also scroll through the elements:
- Clicking on the content area
- Clicking on the action buttons below the scrollable
- Using the left and right arrow keys on your keyboard
- With your mouse scroll wheel
Circular plugin version: 0.5.1
The circular plugin generates an infinite loop for the scrollable items. There is no fixed beginning or end and when you surpass the last item it will magically start from the beginning. The same thing happens if you navigate backwards from the first item. Here is this plugin in action:
Autoscroll plugin provides an automatic scrolling capability. It advances to the next items in pre-configured intervals.
Navigator plugin will allow your users to more easily navigate between different pages in the scrollable. This plugin is convenient if you have lots of items in a scrollable list.
Mousewheel plugin enables scrolling with your mousewheel.
Overlaying HTML on top of the main document is a really useful feature to give users focus on a single element of a website. Overlays can be used in different situations and you typically need different kinds of overlays for different situations such as:
- Great looking overlays for displaying your products.
- Simple and snappy overlays for showing info or warning boxes.
- Modal dialogs for prompting and alerting users.
- “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.
The Apple effect looks and behaves like you might have seen on apple.com.
Gallery plugin for Overlay
Click on any of the following thumbnails and you will realize that you don’t need any other overlaying solution anymore.
- Minimal setup for overlay
- The Apple effect for overlay
- Creating modal dialogs with overlay
- Opening overlays programmatically
- Overlays with different styles
- Loading external pages into overlay
- Multiple overlays on a same page
- Creating a customized Overlay effect
- Using the gallery plugin
Here is an exposed video with a company logo overlay. Cool feature really!.
- Minimal setup for expose
- Styling the mask with a background image
- Exposing a form
- Exposing videos with a custom mask
- Working with multiple exposes
If you don’t need anything special you don’t have to study much.
- jQuery support. flashembed is designed with scripters in mind. A polished programming API together with support for jQuery selectors has been built-in.
- Size. Although rich in features, this plugin weighs around 5 kb when minified. This is almost half the size of our competitors.
- Demos. We have a lot of demos and each demo is documented and has a standalone version where everything redundant has been stripped off. There you can see how things can be placed on your site. Copying-and-pasting is encouraged.