jquery-ui/demos/tabs/ajax.html

<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Tabs - Content via Ajax</title>
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<script type="text/javascript">
	$(function() {
		$("#tabs").tabs({
			ajaxOptions: {
				error: function(xhr, status, index, anchor) {
					$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
				}
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Preloaded</a></li>
		<li><a href="ajax/content1.html">Tab 1</a></li>
		<li><a href="ajax/content2.html">Tab 2</a></li>
		<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
		<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
</div>

</div><!-- End demo -->

<div class="demo-description">

<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links.  While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.</p>

<p>Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.</p>
</div><!-- End demo-description -->

</body>
</html>
Tabs: Added demos for ajax, deselectable, mouseover (event). 2008-12-29 02:38:39 +00:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`
slightly reorganized/renamed demos to better reflect functionality 2009-01-20 21:30:24 +00:00			`<title>jQuery UI Tabs - Content via Ajax</title>`
fixed #5163 - themes: css files need to be renamed to be consistent with js file renames in 1.8a1 2010-02-16 01:38:23 +00:00			`<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />`
Fixed #5182 - Update to jQuery 1.4.2 2010-02-16 02:39:57 +00:00			`<script type="text/javascript" src="../../jquery-1.4.2.js"></script>`
renamed all ui..js files to jquery.ui..js, all effects..js files to jquery.effects..js per announcement and discussion here http://groups.google.com/group/jquery-ui-dev/msg/d565a0c56e0cb935 2009-09-17 10:39:12 +00:00			`<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>`
extracting widget factory into jquery.ui.widget.js 2009-12-16 22:20:18 +00:00			`<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>`
renamed all ui..js files to jquery.ui..js, all effects..js files to jquery.effects..js per announcement and discussion here http://groups.google.com/group/jquery-ui-dev/msg/d565a0c56e0cb935 2009-09-17 10:39:12 +00:00			`<script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>`
demos: moved the demos.css link down so it can override default theme styles. other minor updates. 2008-12-31 06:29:31 +00:00			`<link type="text/css" href="../demos.css" rel="stylesheet" />`
Tabs: Added demos for ajax, deselectable, mouseover (event). 2008-12-29 02:38:39 +00:00			`<script type="text/javascript">`
			`$(function() {`
Fix for #4451 - ajax tabs error handling 2010-02-24 18:43:33 +00:00			`$("#tabs").tabs({`
			`ajaxOptions: {`
			`error: function(xhr, status, index, anchor) {`
			`$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");`
			`}`
			`}`
			`});`
Tabs: Added demos for ajax, deselectable, mouseover (event). 2008-12-29 02:38:39 +00:00			`});`
			`</script>`
			`</head>`
			`<body>`

Added container divs and descriptions 2008-12-30 19:12:57 +00:00			`<div class="demo">`

Tabs: Added demos for ajax, deselectable, mouseover (event). 2008-12-29 02:38:39 +00:00			`<div id="tabs">`
			`<ul>`
ajax tabs demo: renamed tabs to fit on the demo template 2010-02-24 18:47:26 +00:00			`<li><a href="#tabs-1">Preloaded</a></li>`
			`<li><a href="ajax/content1.html">Tab 1</a></li>`
			`<li><a href="ajax/content2.html">Tab 2</a></li>`
			`<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>`
			`<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>`
Tabs: Added demos for ajax, deselectable, mouseover (event). 2008-12-29 02:38:39 +00:00			`</ul>`
			`<div id="tabs-1">`
			<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
			`</div>`
			`</div>`

Added container divs and descriptions 2008-12-30 19:12:57 +00:00			`</div><!-- End demo -->`

			`<div class="demo-description">`

small fix to demo caption 2009-01-20 21:47:27 +00:00			`<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links. While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.</p>`
Added container divs and descriptions 2008-12-30 19:12:57 +00:00
Fix for #4451 - ajax tabs error handling 2010-02-24 18:43:33 +00:00			`<p>Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.</p>`
Added container divs and descriptions 2008-12-30 19:12:57 +00:00			`</div><!-- End demo-description -->`

Tabs: Added demos for ajax, deselectable, mouseover (event). 2008-12-29 02:38:39 +00:00			`</body>`
			`</html>`