• Choose a category
• All
• Classic-Fiction

By Root 1109 0

meantime we can have a look at the simplest possible use of it: loading content from the server into our page without refreshing.

By now you’re probably accustomed to including jQuery UI functionality. Make sure you build a download that includes the Tabs component, then include the CSS and JavaScript files into your HTML. You can have a look at what our jQuery UI tabs will look like in Figure 5.7.

Figure 5.7. jQuery UI tabs

With the UI library and CSS styles in place, adding the content is easy. Content loaded via Ajax has no requirement for a container to be preset—the plugin automatically generates the required DOM elements:

chapter_05/12_jquery_ui_tabs/index.html (excerpt)

As we did before, we first create a tab navigation list. For static content, you need to specify an anchor name that corresponds to the id of the element containing the related content (#intro in our example). The next two tabs are our Ajax tabs; they simply point to HTML files on the server (or in our case, on the hard disk). In a real web application, they’d point to server-side scripts that generate dynamic content; for the sake of illustrating how jQuery UI’s Ajaxy tabs work, we’ll stick with a few static HTML files. These can contain whatever content you’d like to load into your tabs.

The functionality we’ll implement will degrade gracefully in the absence of JavaScript; those tabs will simply act as links to the referenced files. When JavaScript is enabled, however, jQuery will load the content of the target page into the tab content pane without refreshing the page. There’s no need to worry about it pulling in the whole HTML page—it’s smart enough to only include the content between the opening and closing tags.

To turn the above markup into an Ajax-enabled tab interface, all you need to write is:

chapter_05/12_jquery_ui_tabs/script.js (excerpt)

$('#info').tabs();

Try it out in your browser to confirm that it works. If this is not “Write less, do more,” we don’t know what is!

Tab Options

The tab control comes with reams of customization options that you can find on the jQuery UI tab demo page. We’ll explore a few of the juicy ones now:

chapter_05/13_jquery_ui_tab_options/script.js (excerpt)

$('#info').tabs({

event: 'mouseover',

fx: {

opacity: 'toggle',

duration: 'fast'

},

spinner: 'Loading...',

cache: true

});

As part of the control’s initialization, we’ve passed a JavaScript object containing a collection of options: event, fx, spinner, and cache. The event option lets you choose the event that changes tabs—here we’ve replaced the default click with mouseover. To change tabs now, the user need only hover over the desired tab.

Next, we’ve added some animation options to specify a fast fade transition when we switch between tabs. The fx option works exactly like the animate command, letting you tweak the transition in whichever way you need.

The last two options are for our Ajax tabs. spinner specifies the HTML to display while the content is being loaded. With all your pages sitting on your local machine, you’re likely to never see this text—but you’ll certainly notice the delay (and therefore the spinner text) when you put your pages up on a real web server. It’s called spinner as it’s often used to display an animated GIF image of a spinning icon, which is meant to indicate loading and almost always named spinner.gif.

The cache option instructs the browser to hold on to a copy of the tab content after it’s loaded. This way, if a user is clicky on your tabs—switching repeatedly back and forth—the browser won’t need to download a fresh copy of the data each time.

Tab Control Methods

There are also a host of methods for interacting with the tabs programmatically. You can add, remove, and reload tabs, and change the