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:
[exec]$filestr = file_get_contents(‘https://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);
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.
- 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 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.
Toolkit with 6 Awesome jQuery User Interface components
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!?
[…] Toolkit with 6 Awesome jQuery User Interface components | tripwire magazine […]
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?
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.
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
I’ve been using the library for a while, and very satisfied with it
[…] Toolkit with 6 Awesome jQuery User Interface components […]
[…] this link: Toolkit with 6 Awesome jQuery User Interface components | tripwire … This entry was posted in jQuery and tagged awesome, community-picks, developers, get-tabs, jQuery, […]
[…] https://www.tripwiremagazine.com/ajax/developer-toolbox/toolkit-with-6-awesome-jquery-user-interface-… 11? 24th, 2009 in 08 jQuery […]
[…] 2 Likes Visualize your Twitter Timeline with jQuery and SIMILE 2 Likes Toolkit with 6 Awesome jQuery User Interface components | tripwire magazine tripwire magazine provides easy to digest articles with relevant and hand-picked information all […]
Thanks @Lars, what about the needed CSS and images for all of the tools, not just tabs? Thanks!
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!
@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
Toolkit with 6 Awesome jQuery User Interface components…
[…] Toolkit with 6 Awesome jQuery User Interface components […]
[…] Toolkit with 6 Awesome jQuery User Interface components Submitted by Editorial Team […]
Thank you for the great collection. Amazing what can be accomplished on the web these days.
[…] This post was mentioned on Twitter by bkmacdaddy designs and Dana Coffey, jQueryBuzz. jQueryBuzz said: Toolkit with 6 Awesome jQuery User Interface components | tripwire magazine http://bit.ly/3EnjfK […]
[…] This post was mentioned on Twitter by neslihan rawles, Larry King. Larry King said: Toolkit with 6 Awesome jQuery User Interface components | tripwire … http://bit.ly/a1nwY #jQuery #Web #Dev […]
Social comments and analytics for this post…
This post was mentioned on Twitter by allwebdesign: Toolkit with 6 Awesome jQuery User Interface components http://bit.ly/ka7YH…
[…] This post was mentioned on Twitter by Louis Gubitosi, tripwire magazine, Blueprint DesignBlog, Web Design Feed, Web Design News and others. Web Design News said: Toolkit with 6 Awesome jQuery User Interface components http://bit.ly/ka7YH […]