jquery-ui/demos/tabs/ajax.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tabs - Content via Ajax</title>
	<link rel="stylesheet" href="../../themes/base/all.css">
	<script src="../../external/jquery/jquery.js"></script>
	<script src="../../ui/core.js"></script>
	<script src="../../ui/widget.js"></script>
	<script src="../../ui/tabs.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#tabs" ).tabs({
			beforeLoad: function( event, ui ) {
				ui.jqXHR.error(function() {
					ui.panel.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 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 class="demo-description">
<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links.</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>
</body>
</html>
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`<!doctype html>`
Tabs: Added demos for ajax, deselectable, mouseover (event). 2008-12-29 02:38:39 +00:00			`<html lang="en">`
			`<head>`
Tabs demos: Coding standards. 2010-10-13 19:43:49 +00:00			`<meta charset="utf-8">`
slightly reorganized/renamed demos to better reflect functionality 2009-01-20 21:30:24 +00:00			`<title>jQuery UI Tabs - Content via Ajax</title>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<link rel="stylesheet" href="../../themes/base/all.css">`
Build: Reorganize external directory Put each external library into its own directory. Move jquery.js to external. Ref gh-1266 2014-06-10 11:55:45 +00:00			`<script src="../../external/jquery/jquery.js"></script>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<script src="../../ui/core.js"></script>`
			`<script src="../../ui/widget.js"></script>`
			`<script src="../../ui/tabs.js"></script>`
Tabs demos: Coding standards. 2010-10-13 19:43:49 +00:00			`<link rel="stylesheet" href="../demos.css">`
			`<script>`
Tabs: Added demos for ajax, deselectable, mouseover (event). 2008-12-29 02:38:39 +00:00			`$(function() {`
Tabs demos: Coding standards. 2010-10-13 19:43:49 +00:00			`$( "#tabs" ).tabs({`
Tabs: Update ajax demo to use beforeLoad event instead of deprecated ajaxOptions option. 2011-04-11 14:39:33 +00:00			`beforeLoad: function( event, ui ) {`
			`ui.jqXHR.error(function() {`
			`ui.panel.html(`
Tabs demos: Coding standards. 2010-10-13 19:43:49 +00:00			`"Couldn't load this tab. We'll try to fix this as soon as possible. " +`
			`"If this wouldn't be a demo." );`
Tabs: Update ajax demo to use beforeLoad event instead of deprecated ajaxOptions option. 2011-04-11 14:39:33 +00:00			`});`
Fix for #4451 - ajax tabs error handling 2010-02-24 18:43:33 +00:00			`}`
			`});`
Tabs: Added demos for ajax, deselectable, mouseover (event). 2008-12-29 02:38:39 +00:00			`});`
			`</script>`
			`</head>`
			`<body>`

			`<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>`

Tabs demos: Coding standards. 2010-10-13 19:43:49 +00:00			`<div class="demo-description">`
Tabs: Fix description in ajax demo Closes jquery/jqueryui.com#90 2014-08-27 18:07:52 +00:00			`<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links.</p>`
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>`
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`</div>`
Tabs: Added demos for ajax, deselectable, mouseover (event). 2008-12-29 02:38:39 +00:00			`</body>`
			`</html>`