HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [307]
The jQuery UI provides two incredible tools for managing larger pages:
♦ The accordion tool allows you to create a large page but display only smaller parts of it at a time.
♦ The tabs tool allows you to easily turn a large page into a page with a tab menu.
These tools are incredibly easy to use, and they add tremendously to your page development options. Both of these tools automate and simplify the DOM and AJAX work it takes to build a large page with dynamic content.
Playing the accordion widget
Some of the most powerful jQuery tools are actually the easiest to use. The accordion widget has become an extremely popular part of the jQuery UI toolset. Take a look at accordion.html in Figure 5-1 to see how it works.
When you look at Figure 5-1, you see headings for the first three minibooks of this book. The details for the first minibook are available, but the other books’ details are hidden. If you click the heading for Book II, Book I is minimized and Book II is now expanded, as you can see Figure 5-2.
This marvelous effect allows the user to focus on a particular part of a larger context while seeing the overall outline. It’s called an accordion because the various pieces expand and contract to allow the user to focus on a part without losing place of its position in the whole. Collapsible content has become an important usability tool made popular by the system bar in Mac OS and other popular usability tools.
Figure 5-1: This page shows the first minibook outline of a familiar-sounding book.
Figure 5-2: Book I is minimized, and Book II is now expanded.
The accordion effect is strikingly easy to achieve with jQuery:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
type = ”text/css”
href = ”css/ui-lightness/jquery-ui-1.8.1.custom.css” />
Accordion Demo
Book I - Creating the XHTML Foundation
- Sound XHTML Foundations
- It’s All About Validation
- Choosing your Tools
- Managing Information with Lists and Tables
- Making Connections with Links
- Adding Images
- Creating forms
Book II - Styling with CSS
- Coloring Your World
- Styling Text
- Selectors, Class, and Style
- Borders and Backgrounds
- Levels of CSS
Book III - Using Positional CSS for Layout
- Fun with the Fabulous Float
- Building Floating Page Layouts
- Styling Lists and Menus
- Using alternative Positioning
As you can see by looking over the code, it’s mainly just HTML. The effect is really easy to accomplish:
1. Import all the usual suspects.
You need to import the jQuery and jQuery UI JavaScript files, and a theme CSS file. (See Book VII, Chapter 4 if you need a refresher on this process.) You also need to make sure that the CSS has access to the images directory with icons and backgrounds, because it will use some of these images automatically.
2. Build your HTML page as normal.
Build an HTML page as you would normally do. Pay attention to the sections that you want to collapse. There should normally be a heading tag for each element, all at the same level (Level 2 headings in my case).