Hi
The final tabs example works fine up to version 1.4.4 of jQuery and 1.6.0 of iQueryUI. Then each of these does it's own special thing to ruin the app (but exactly the same thing right up to the latest versions of both
js libraries).
Some work and hints from
http://docs.jquery.com/UI/Tabs led me to the working code below. Essentially the jQuery selector loses the "<" and the html has classes defined in the relevant divs (for the CSS to work) and updated links to the
js files (hosted by google rather than local, in this case). Change the CSS link if you want to play with the look.
.html file (note, CSS is taken externally making the example .css obsolete in this case)...
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.
js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.
js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type='text/javascript' src='Figure 16-6.
js'></script>
</head>
<body>
<div id="tmpTabExample" class="ui-tabs">
<ul>
<li>
<a href="#tmpTab-1"><span>First Tab</span></a>
</li>
<li>
<a href="#tmpTab-2"><span>Second Tab</span></a>
</li>
<li>
<a href="#tmpTab-3"><span>Third Tab</span></a>
</li>
<li>
<a href="tab.html" title="tmpTab-4"><span>Fourth Tab</span></a>
</li>
</ul>
<div id="tmpTab-1" class="ui-tabs-hide">
<p>
First tab is activated by default.
</p>
</div>
<div id="tmpTab-2" class="ui-tabs-hide">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse
id sapien. Suspendisse rutrum libero sit amet dui...
</p>
</div>
<div id="tmpTab-3" class="ui-tabs-hide">
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
<div id="tmpTab-4" class="ui-tabs-hide">
</div>
</div>
</body>
</html>
.
js file...
$(document).ready(function() {
$("#tmpTabExample").tabs({
fx : {
opacity : 'toggle',
duration : 'fast'
}
});
});
Hope that helps others!
Ch16 (tabs) corrections for later jQuery versions
