The first thing we need to do is to get a copy of the jQuery Tools library, from the official website (http://www.flowplayer.org/tools).
The modular nature of jQuery Tools means that you can choose the components you want to download, or you can choose to download a copy of the entire library. This is important if you want to keep your pages as light as possible.
There are several options available for the purpose of downloading the jQuery Tools library: you can use the free CDN links (even for production use), download a custom version, or download an uncompressed version from the Github area.
If you include this statement in your code:
<script src= "http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js"> </script>
You will have the following tools available:
- jQuery 1.6.4
- Tabs
- Tooltip
- Scrollable
- Overlay
The tools will be loaded with maximum performance no matter where your user is located on the globe. If you already have jQuery included on your page, you can simply remove it and use only the script src statement (as it already includes jQuery), or, if you prefer, insert the tools without jQuery link, for example:
<script src= "http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"> </script>
Then reference jQuery separately; the best practice is to use Google's CDN link, which is (at time of writing):
<script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js> </script>
If you prefer, you can use one of the other CDN links provided for referencing jQuery Tools—CDN stands for Content Delivery Network, which is a high-speed network that allows fast provision of content around the world.
There are several advantages to using this method:
- If you've already been to a site where jQuery Tools have been used, then it will already be cached, and this means you don't have to download it again.
- Content is made available through local servers around the world, which reduces the download time, as you will get a copy of the code from the nearest server.
The following are some of the links available for you to use, more are available on the jQuery Tools website:
<!-- UI Tools: Tabs, Tooltip, Scrollable and Overlay --> <script src= "http://cdn.jquerytools.org/1.2.6/tiny/jquery.tools.min.js"> </script> <!-- ALL jQuery Tools. No jQuery library --> <script src= "http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"> </script> <!-- jQuery Library + ALL jQuery Tools --> <script src= "http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"> </script>
For the purpose of this book, you should use the main CDN link, so that we can make sure we're all on the same page.