The modular design of jQuery Tools allows you to pick and choose which components you need for your projects. If your project doesn't need all of the components, then it's good practice to only download those that you need, to reduce the page weight and keep page response time as low as possible.
The download builder (http://flowplayer.org/tools/download/index.html) produces minified versions of the tools you choose, into one file—this can include jQuery if desired. The default download (shown overleaf) includes the major tools, which are Overlay, Tabs, Scrollable, and Tooltips—you can change these selections to only download those components you need for a specific project. You can also choose to include jQuery 1.6.4 at the same time, which helps to cut down page load times, as explained earlier in this chapter.
If you are using a debugger such as Firebug, you can test which tools are included and what are their versions by running the following command from the console:
console.dir($.tools);
You'll see something similar to the following screenshot:
You can see each tool you have included and the version number. If you drill down a little deeper into these global settings you will see each tool's default configuration values (a good source for documentation!), which are discussed more extensively in the important Using Global Configuration section of this chapter.
The next step is to include the Tools on your page—you can either use one of the CDN links as shown earlier, or include a custom version using the download builder.
Then you need to initialize the tools—they all follow the same pattern, which starts with a jQuery selector, followed by the initialization function (or constructor), and its configuration object. Here is an example using the scrollable tool, where elements are contained within an element whose ID is scroll:
$("#gallery").overlay({
fixed: true,
closeOnClick: false
})
When using the API format, the constructor will always return the jQuery object that is a collection of the elements that are selected by the selector, which you can then continue to work with, as shown in the following code snippet:
// return elements specified in the selector as a jQuery object
var elements = $("div.scrollable").scrollable();
elements.someOtherPlugin().Click(function() {
// do something when this element is clicked
});
Sometimes you may find that you want to specify a default configuration value, so that you can avoid the need to set the same settings repeatedly in your code. jQuery Tools has a global configuration option, $.tools.[TOOL_NAME].conf, which is:
// all overlays use the "apple" effect by default $.tools.overlay.conf.effect = "apple";
This means you then don't need to include it in your JavaScript code for Overlay:
// "apple" effect is now our default effect
$("a[rel]").overlay();
You can then override it if you need to:
$("a[rel]").overlay({effect: 'default'});
If you want to change multiple configuration options at a global level, you can use the jQuery built-in $.extend method:
$.extend($.tools.overlay.conf, {
speed: 400,
effect: 'apple'
});
Note
The list of various configuration settings can be found on each individual tool's documentation page.
You can use something like Firebug to get more details of the global configuration, by typing in this command console.dir($.tools.overlay.conf); which will produce images similar to this:
