Toolkit with 6 Awesome jQuery User Interface components

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 effort used to present these tools on-line and document them is amazing. Its all in a single JavaScript file weighs only 5.72 Kb.

“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:

• 150 Worth Knowing Web Developer Tools and Techniques
• 120+ Javascript, Ajax, jQuery Mega Toolbox

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);
echo $filestr;[/exec]

tabs

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.
• Lightweight. The JavaScript file is only 2.9 Kb when minified. Compare this to the jQuery UI library where you’ll have to have 130 Kb of minified code to get tabs and accordions working.

There are many demos to get you started here is an example of tabs with mouse over switch.

Demo

• 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

tabs.jquery-tools-lib

The jquery-tools-lib plugin provides an automatic switching between tabs. It advances to the next tab in pre-configured intervals.

tabs.history

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.

tooltip

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.

Demo:

Demo:

• 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

Effect: Slide

The slide effect makes your tooltips slide. Move your mouse over the download button below and you can see it in action:

Plugin: Dynamic

This is using the dynamic plugin which repositions the tooltips so that they are always visible in the viewport.

scrollable

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:

1. Clicking on the content area
2. Clicking on the action buttons below the scrollable
3. Using the left and right arrow keys on your keyboard
4. 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

Autoscroll plugin provides an automatic scrolling capability. It advances to the next items in pre-configured intervals.

Navigator plugin

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

Mousewheel plugin enables scrolling with your mousewheel.

Overlay

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:

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.

The overlay can contain any HTML and the whole thing can be styled with CSS. There is no clutter and there are no surprises. This overlay tool is now a significant part of the JavaScript/Web 2.0 landscape. Don’t rely on other, half-baked solutions.

Apple Effect

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.

Demo:

• 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

expose

Expose is a JavaScript tool that exposes selected HTML elements on the page so that the surrounding elements will gradually fade out. Usually the effect is an integral part of the program and cannot be used separately. This tool takes the idea of exposing a little further. It is a separate tool that can be used as a general purpose expose utility. You can use it for overlays, forms, images, videos or Flash objects. You can use CSS to tweak the look of the semi-transparent surrounding layer which is referred to as the “mask”.

Here is an exposed video with a company logo overlay. Cool feature really!.

Demo

• Minimal setup for expose
• Styling the mask with a background image
• Exposing a form
• Exposing videos with a custom mask
• Working with multiple exposes

flashembed

Flashembed is a JavaScript tool that you can use to embed Flash objects on your website. This tool does not depend on jQuery as the tools listed above.

• Simplicity. The above example was performed with this JavaScript call:
  flashembed(this, “flash_promo.swf”);
  If you don’t need anything special you don’t have to study much.
• JSON configuration. When supplying configuration for Flash objects, the values can be complex JavaScript objects with arrays, strings, functions and other objects. as opposed to the traditional XML-based configuration, this is simpler and much more flexible. In fact this was the main reason for developing this tool.
• 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.

Demos:

• Basics of Flash embedding
• Flashembed and jQuery
• Loading Flash on mouse click
• Placing HTML on top of a Flash object
• Handling old Flash versions
• Flashembed and Flowplayer

Lars

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.