VT’s Tech Blog

jQuery Tools provides some UI addons to the basic jQuery Library. You can create Tabs, Accordions, Tooltips, Overlays and more using this library. The whole library fits in less than 6Kb, so you can replace all the separate libraries you are using for these functionalities by using this library.

The library has an easy to use API, which both beginners and advanced developers can use to integrate. To show you how easy it is to setup tabs in this library, here’s an example from their site. The HTML code looks like this:

<!-- the tabs -->
<ul>
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div>pane 1 content</div>
<div>pane 2 content</div>
<div>pane 3 content</div>
</div>

The Javascript which powers the tabs is simply :

// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");

To see this in action and more information on the code, check this link out:
http://flowplayer.org/tools/tabs.html

You can also check out the other functionalities which this library provides :

• Tooltips ( this example shows tooltips working on form fields)
• Overlays
• Accordians
• Other Demos

Learn more about jQuery Tools over at: http://flowplayer.org/tools/index.html

Related articles by Zemanta

• jQuery from the very beginning (slideshare.net)
• Glimmer – jQuery Made Easy (blogs.msdn.com)
• jQuery UI 1.7 Released: New CSS Framework & Dramatic Updates to Controls (ajaxian.com)

Janko Jovanovic’s got an excellent tutorial which shows you how to highlight the current active form area to improve usability of forms. He achieves this using jQuery.

He shows how to construct the form, style it and uses jQuery magic to get this functionality working for the form. He mentions that this improves the usability of large forms by focusing the user on the current action on the form.

You can see a demo of this over at:
http://www.jankoatwarpspeed.com/examples/ContextHighlighting/

Head over to the tutorial over at: Context highlighting using jQuery

Related articles by Zemanta

• Chain.js: jQuery Data Binding Service
• Designing Your Page Around a jQuery UI Theme

Here’s some cool stuff – Google’s Hosting some popular Javascript Ajax libraries like jQuery, prototype and the likes on their servers. You use this service to serve the supported libraries straight off Google. They also provide you with the option to load a particular version of the library so you won’t have to keep checking your code everytime a latest release is made.

Here’s how you would load jQuery version 1.2.3 using this API:

<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery 
  google.load("jquery", "1.2.3");
 //Continue using jQuery
</script>

The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the Google AJAX API Loader’s google.load() method, your application has high speed, globaly available access to a growing list of the most popular JavaScript open source libraries including:

• jQuery
• prototype
• script.aculo.us
• MooTools
• dojo

Google works directly with the key stake holders for each library effort and accept the latest stable versions as they are released. Once we host a release of a given library, we are committed to hosting that release indefinitely.

Links:

Google Ajax Libraries

Documentation

Here’s a blog which lists out 240 plugins for jQuery. The list of plugins there covers almost everything you’d need to do with Javascript. If you haven’t yet heard of jQuery, head over to jquery.com and check that out. Once you’ve jQueried, you’ll never want to return to regular Javascript !

To check out the list of jQuery plugins, head over to http://www.sastgroup.com/jquery/240-plugins-jquery