<p>The content for each tab panel can be defined in-page or can be loaded via Ajax; both are handled automatically based on the <code>href</code> of the anchor associated with the tab. By default tabs are activated on click, but the events can be changed to hover via the <ahref="#option-event"><code>event</code></a> option.</p>

<code>ui-tabs</code>: The outer container of the tabs. This element will additionally have a class of <code>ui-tabs-collapsible</code> when the <ahref="#option-collapsible"><code>collapsible</code></a> option is set.

67

<ul>

68

<li>

69

<code>ui-tabs-nav</code>: The list of tabs.

70

<ul>

71

<li>The active list item in the nav will have a <code>ui-tabs-active</code> class. Any list item whose associated content is loading via an Ajax call will have a <code>ui-tabs-loading</code> class.

72

<ul>

73

<li><code>ui-tabs-anchor</code>: The anchors used to switch panels.</li>

74

</ul>

75

</li>

76

</ul>

77

</li>

78

<li><code>ui-tabs-panel</code>: The panels associated with the tabs. Only the panel whose corresponding tab is active will be visible.</li>

<p>Triggered after a tab has been activated (after animation completes). If the tabs were previously collapsed, <code>ui.oldTab</code> and <code>ui.oldPanel</code> will be empty jQuery objects. If the tabs are collapsing, <code>ui.newTab</code> and <code>ui.newPanel</code> will be empty jQuery objects.</p>

136

<divclass="warning"><strong>Note:</strong> Since the <code>activate</code> event is only fired on tab activation, it is not fired for the initial tab when the tabs widget is created. If you need a hook for widget creation use the <ahref="#event-create"><code>create</code></a> event.</div>

<desc>Triggered immediately before a tab is activated. Can be canceled to prevent the tab from activating. If the tabs are currently collapsed, <code>ui.oldTab</code> and <code>ui.oldPanel</code> will be empty jQuery objects. If the tabs are collapsing, <code>ui.newTab</code> and <code>ui.newPanel</code> will be empty jQuery objects.</desc>

<p>Triggered when a remote tab is about to be loaded, after the <ahref="#event-beforeActivate"><code>beforeActivate</code></a> event. Can be canceled to prevent the tab panel from loading content; though the panel will still be activated. This event is triggered just before the Ajax request is made, so modifications can be made to <code>ui.jqXHR</code> and <code>ui.ajaxSettings</code>.</p>

<p><em>Note: Although <code>ui.ajaxSettings</code> is provided and can be modified, some of these properties have already been processed by jQuery. For example, <ahref="//api.jquery.com/jQuery.ajaxPrefilter/">prefilters</a> have been applied, <code>data</code> has been processed, and <code>type</code> has been determined. The <code>beforeLoad</code> event occurs at the same time, and therefore has the same restrictions, as the <code>beforeSend</code> callback from <ahref="//api.jquery.com/jQuery.ajax/"><code>jQuery.ajax()</code></a>.</em></p>

<desc>Process any tabs that were added or removed directly in the DOM and recompute the height of the tab panels. Results depend on the content and the <ahref="#option-heightStyle"><code>heightStyle</code></a> option.</desc>