Web Development with jQuery®

Summary (^) ❘ 429
hide : 'fade'
});
}
);
The preceding script adds an explode effect when tabs are opened and fades out when tabs are
closed. This example is available in this book’s source code materials in Example 18-4.html.
Comprehensive documentation of animation options is provided in Appendix Q.

Summary

Several additional options can also be used with a Tabs implementation. I’ve covered some of the

more useful options in this chapter, and you can fi nd a full reference of all options available for the

Tabs plugin in Appendix Q.

In this chapter, you learned how to implement a tabbed user interface using the jQuery UI Tabs

plugin. By default, the Tabs plugin offers no presentational styling. You learned how to approach

styling a tabbed user interface so that you can apply your own custom styling. Another option is to

use a jQueryUI theme, which you can download from the jQuery UI website at http://www.jqueryui.com.

You learned that the Tabs plugin supports loading content remotely using AJAX; you need to add

only a little markup to accomplish this.

And fi nally, you also learned that the Tabs plugin supports animated transitions between tabs via

the show and hide options.

EXERCISES

1. Which option would you use to change the default tab that is displayed after the tabs()

method has been applied?

2. What class names are used to style the active tab and the hover tab?


3. What do you have to do to load content via an AJAX call?


4. What options can you use to animate tab transitions?

http://www.it-ebooks.info