The HTML structure follows the same principles as
the minimal setup for Scrollable with the
addition of two special elements: #drawer for showing
the error messages in "twitter style" and #status for
displaying the page the user is currently on.
The CSS coding is the hardest part of this demo. Here are the most
important parts taken from the
which is used for styling the entire demo.
This is the easy part (again). Self explanatory.
Input validation logic
The wizard contains a simple validation logic that only checks that
the required fields are not blank. It checks for input fields that
are nested inside an li.required element and makes sure
that they have a value. White space characters are not accepted. If
you want to implement a proper validation logic please use
the Validator Tool.
I have added lots of comments so that you'll understand what's
happening. Notice that the "drawer" logic is a very simple one-liner
although the effect is very useful.
The final tweak
We still need to make one optimization for the whole setup. If the
user advances through those form fields with the TAB key we must
make sure that the form page is validated before advancing to the
The new jQuery Tools book by Alex Libby explores the library in a
precise and structured fashion. If you are getting started on jQuery Tools or
looking for better ways to use the library, this book will be your ally.