Toolkit with 6 Awesome jQuery User Interface components

February 16, 2011 · 22 comments

by Lars

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.


ElegantThemes
ThemeForest

Advertisement

tabs

jquery-tools-lib

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.

jquery-tools-lib

Demo

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.

jquery-tools-lib

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

jquery-tools-lib

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:

Effect: Slide

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

jquery-tools-lib

Plugin: Dynamic

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

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:

jquery-tools-lib

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.

jquery-tools-lib

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.

jquery-tools-lib

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.

jquery-tools-lib

Demo:

expose

jquery-tools-lib

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!.

jquery-tools-lib

Demo

flashembed

jquery-tools-lib

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:

{ 10 comments… read them below or add one }

cheap custom jerseys May 19, 2011 at 10:30 am

Toolkit with 6 Awesome jQuery User Interface components

Reply

Dave Coleman May 13, 2011 at 6:46 pm

I ran across this sub-framework the other day and it perplexed me. I’ve been using jQuery a lot the past couple years and haven’t heard anything about these guys until now. Why haven’t they become more popular? Are these guys legit? How is it so pretty and so perfect!?

Reply

Thomas Burleson December 19, 2009 at 12:42 am

Why should I use flashEmbed if I currently use SWFObject v2.2.
SWFObject is the recommended to for dynamic injection of a SWF into a div area.
Can you tell me – if any – the advantages that FlashEmbed.js has over swfobject.js?

Thanks,
ThomasB

Reply

Alan December 18, 2009 at 10:51 am

JQuery Tools is very good, take a bit of getting used to, I haven’t done any straight out of the box stuff with it but once you get an understanding of how the plugins work together it kicks ass.

Tero has done a great job with this library and I would recommend it to anyone.

Reply

ben December 16, 2009 at 2:28 pm

looks like a great product and is done right for a change almost as right has hugo boss 6 when one is done shaving in the am

Reply

Dries December 4, 2009 at 2:19 pm

I’ve been using the library for a while, and very satisfied with it

Reply

Kevin November 22, 2009 at 11:40 pm

Thanks @tripwiremag, what about the needed CSS and images for all of the tools, not just tabs? Thanks!

Reply

Kevin November 22, 2009 at 6:43 pm

I see how to download the js libs (http://flowplayer.org/tools/download.html), but where are the supporting css and image files?

Thank you very much!

Reply

tripwiremag November 22, 2009 at 10:55 pm

@Kevin: Go to the documentation page and select the script you want to use ex. tabs. Then you will see that there are skins available for download: http://flowplayer.org/tools/demos/tabs/skins.html

Reply

Brian Jones November 19, 2009 at 2:26 pm

Thank you for the great collection. Amazing what can be accomplished on the web these days.

Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 12 trackbacks }

Previous post:

Next post:


Web Analytics