HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [309]
2. Build HTML as normal.
If you’re building a well-organized Web page anyway, you’re already pretty close.
3. Build a div that contains all the tabbed data.
This is the element that you’ll be doing the jQuery magic on.
4. Place main content areas in named divs.
Each piece of content that will be displayed as a page should be placed in a div with a descriptive ID. Each of these divs should be placed in the tab div. (See my code for organization if you’re confused.)
5. Add a list of local links to the content.
Build a menu of links. Place this at the top of the tabbed div. Each link should be a local link to one of the divs. For example, my index looks like this:
6. Build an init() function as usual.
Use the normal jQuery techniques.
7. Call the tabs() method on the main div.
Incredibly, one line of jQuery code does all the work.
Using tabs with AJAX
You have an even easier way to work with the jQuery tab interface. Rather than placing all your code in a single file, place the HTML code for each panel in a separate HTML file. You can then use a simplified form of the tab mechanism to automatically import the various code snippets through AJAX calls. Look at the AJAXtabs.html code for an example:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
type = ”text/css”
href = ”css/ui-lightness/jquery-ui-1.8.1.custom.css” />
AJAX tabs
Note: I didn’t provide a screen shot for the AJAXtabs.html page, because it looks exactly like tabs.html, shown in Figure 5-4.
This version of the code doesn’t contain any of the actual content! Instead, jQuery builds the tab structure and then uses the links to make AJAX requests to load the content. As a default, it finds the content specified by the first tab (chap1.html) and loads it into the display area. Here’s what book1.html contains:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
type = ”text/css”
href = ”css/ui-lightness/jquery-ui-1.8.1.custom.css” />
AJAX tabs
As you can see, book1.html is simply a code snippet. It doesn’t need all the complete trappings of a Web page (like the doctype or header) because it’s meant to be pulled in as part of a larger page. The AJAX trick is a marvelous technique because it allows you to build a modular system quite easily.