jQuery Tools - Javascript UI Components for the Web

jQuery Tools is a collection of the most important user-interface components for today's websites. This single JavaScript file weighs only 5.8 Kb . jQuery Tools contain some useful JavaScript tools like tabs and accordions, tooltips, overlays, exposing effects and scrollable and all those "web 2.0" goodies that you have seen on your favorite websites.

Anyone can use jQuery Tools without knowledge about jQuery and even JavaScript itself. You don't need to be a programmer to use these tools. We have lots of demos you can explore and you can copy their source code to your site and things will work.

jQuery Tools are minified with the YUI Compressor . its means it removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In a survey of ten top U.S. web sites, minification achieved a 21% size reduction.

This library is dual licensed under MIT and GPL 2+ licenses.

Advantages of jQuery Tools:

• CSS-based design :

  1. scalable size : Your elements can stretch horizontally and vertically without problems.
  2. maintenable : you caneasily change the design just by editing a few lines of code.
  3. lightweight : CSS files are compressed and GZIPped which makes them more faster to download . CSS files are text which means that they can be downloaded much faster than images.

• Image-based design :

  1. best visual control : design will look exactly how you want it to look. No compromises.

• CSS and image-based design :

  1. best of both worlds : Scalable elements that look good.

Disadvantages of jQuery Tools:

• CSS-based design :

  1. limited visual control : There are lots of things you can tweak with CSS, but in the end they are limited and you simply cannot do everything with them.

• Image-based design :

  1. fixed size : Your elements' width and height is fixed. You have to optimize the content to fit inside elements and for excessive content you must rely on scripting or scrollbars.
  2. heavy : Duo to Heavy use of images will slow down your pages.

• CSS and image-based design :

  1. lots of work : You need Master knowledge of CSS and a tight integration with the graphics designer is needed. This approach needs more planning.

Demos of jQuery Tools :

1.TABS : The most important UI widget on the web

• Minimal setup for tabs
• Naming the tabs
• 3 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

2. Tooltips : The second most important UI widget

• Basics of using the tooltip
• Using tooltips in form fields
• Using tooltips in tables or lists
• Custom tooltip effect

3. Expose : Overlay your HTML with eye candy

• Minimal setup for overlay
• Trigger overlay programmatically
• Overlays with different styles
• Multiple overlays on a same page
• Loading external pages into overlay
• Overlay together with expose tool

4. Scrollable : Scroll your HTML with jquery scrollable

• Minimal setup for scrollable
• A vertical scrollable
• Using navigational elements
• A more visual scrollable
• Add and remove items from scrollable
• Customizing the scrolling animation
• Setup automatic scrolling

5. Flashembed : The Future of Flash embedding

• 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

6. jQuery Tools and Flowplayer : Video-enabled demos with Flowplayer

• Overlaying videos
• Custom Fullscreen action with overlay
• Email and embed features in an overlay
• Tabbed email and embed features
• Multiple players in a tabbed pane