JQuery_ Novice to Ninja - Earle Castledine [32]
The custom download archive contains a lot of files. There are heaps of demos and documentation for you to try out and explore in the development-bundle directory, but to use jQuery UI you’ll simply need the jQuery-ui-1.7.2-min.js file (or whichever version is current at the time you’re reading this), and the directory that contains the theme you’ve chosen.
You’ll have to put the theme’s directory in a location where your HTML page can reach it. For this book’s examples, jQuery UI has been placed in the lib directory (alongside jQuery itself), and the theme files in the css directory.
The jQuery UI library contains an Effects package that enables us to implement some interesting effects. It also includes useful methods and functionality for doing advanced animation. We’ve seen some of this functionality already, thanks to the Color Animation plugin and the Easing plugin. These are included in the Effects package, so you no longer need to include them if you’re going to use the jQuery UI effects library.
Before we move on, let’s just have a quick look at a few of the available effects. We’ll take our much-maligned first paragraph element and shake it about, highlight it in yellow, then explode it to pieces:
chapter_03/11_jquery_ui_effects/script.js (excerpt)
$('p:first')
.effect('shake', {times:3}, 300)
.effect('highlight', {}, 3000)
.hide('explode', {}, 1000);
Look at it go! Of course, this is just a tiny sample of the available effects. Some of them can only be used in this way, via the effect action, while others can be used either in this way or in place of hide, show, or toggle parameters. Some examples of the latter are blind, clip, puff, fold, and slide.
We’ll refrain from going through all of them in detail here—you’re best off spending your Sunday afternoon exploring them. Not all of the effects are pure flair, however, but many are useful in common user interaction scenarios, such as highlight, which is a standard way to indicate a new message to the user.
It’s a good idea to test out each function, so you’ll remember them when they’re appropriate. And if the jQuery UI assortment of effects just isn’t enough for you, never mind—there are hundreds more available from the plugin repository!
Get Animated!
You now understand all the fundamentals of animating with jQuery: selectors, event handlers, callbacks, chaining, and the all-important animate function. You’ve also become briefly acquainted with the extensive jQuery UI library. The best way to really master these skills, however, is to put them into practice. Go out and animate everything you can get your hands on! Try playing with every property of every element on every page, until you feel like you can really bend them to your will.
Before we move on from animation to the next jQuery skill set for you to master, we’ll turn our attention to scrolling and resizing: these topics might be less flashy than animation, but they’re essential to a good many user interface components. They’ll also help cement your understanding of jQuery selectors, actions, and chaining. So what are we waiting for?
Scrolling
Scrolling is, in a way, similar to animation, in that elements are moving around the page. Unlike animation though, the user is the one in control! Still, there’s a plethora of ways to customize these interactions. In this section, we’ll have a look at menus that stay put when the user scrolls, custom-themed scrollbars, and even how we can use the animation techniques we’ve just learned and apply them to scrolling the document.
The scroll Event
Before we can improve our users’ scrolling experience, we need to know when and what they are scrolling. It turns out there is an event, called scroll, which fires