jQuery UI Tabs - Content via Ajax : UI Tab « jQuery « JavaScript Tutorial






<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Tabs - Content via Ajax</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.tabs.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
  $(function() {
    $("#tabs").tabs();
  });
  </script>
</head>
<body>

<div class="demo">

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="ajax/content1.html">Ajax Tab 1</a></li>
    <li><a href="ajax/content2.html">Ajax Tab 2</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>

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

</body>
</html>








30.150.UI Tab
30.150.1.jQuery UI Tab with list
30.150.2.jQuery UI Tabs - Collapse content
30.150.3.jQuery UI Tabs - Default functionality
30.150.4.jQuery UI Tabs - Open on mouseover
30.150.5.jQuery UI Tabs - Sortable
30.150.6.jQuery UI Tabs - Vertical Tabs functionality
30.150.7.jQuery UI Tabs - Content via Ajax
30.150.8.Set second tab selected
30.150.9.Disable the first tab
30.150.10.Animation for tab on change event
30.150.11.Alert the id of the tab that was selected
30.150.12.Tab selected event
30.150.13.Enable and disable tab by click a button
30.150.14.Add a tab to tab panel
30.150.15.Remove a tab from tab panel
30.150.16.Rotate tabs
30.150.17.Destroy a tab panel
30.150.18.Add static html content from a file to tab panel
30.150.19.Load static html file to a tab panel