(^428) ❘ CHAPTER 18 TABS
FIGURE 18-3
In the preceding markup document, there are a few minor modifi cations made to add a new tab that
has content loaded via AJAX. You set up the tab with the href attribute referencing the document
that you want to load by AJAX. The id attribute is not necessary and is automatically generated by
the Tabs plugin. (It does this for all the tabs if you want to structure your document using automati-
cally generated id names.)Using a server-side script, you can add logic on the server side that presents content within your
normal template depending on whether scripting is enabled on the client side. To do that, by default,
make the link content.html?noscript=true. Then, in your JavaScript, automatically remove the
query string portion ?noscript=true at page load, which would then signal your server-side script
to serve only the content, rather than the content within a template. Without this, if scripting is
disabled, your visitors can still see the content; it will simply be plain, unstyled, and unbranded.Finally, the class name ui-tabs-loading is applied to the <li> element during the time that the con-
tent is loading from the server up until the time the Tabs plugin loads and displays it.Animating Tab Transitions
Most things in jQuery UI can be customized with any of the animation effects provided by jQuery,
and the Tabs plugin is no exception. Like the Dialog plugin, the Tabs plugin also accepts show
and hide options, which can specify an effect when a tab is opened and when a tab is closed,
respectively.The following script demonstrates how to animate a tab transition:
$(document).ready(
function()
{
$('div#exampleTabs').tabs({
active : 1,
show : 'explode',