Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 187 lines (185 sloc) 9.715 kB
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
1 <?xml version="1.0"?>
21f6c28 @scottgonzalez Added placeholder for which element is returned by the widget() method.
scottgonzalez authored
2 <entry name="tabs" type="widget" animated-element="panel" widget-element="tabs container">
12f32df @scottgonzalez Added <title> for page titles.
scottgonzalez authored
3 <title>Tabs Widget</title>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
4 <desc>A single content area with multiple panels, each associated with a header in a list.</desc>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
5 <longdesc>
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid an…
jzaefferer authored
6 <p>Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.</p>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
7
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
8 <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 <a href="#option-event"><code>event</code></a> option.</p>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
9 </longdesc>
21606fa @scottgonzalez Moved functional CSS comment into resuable note.
scottgonzalez authored
10 <note id="functional-css"/>
24e33d1 @scottgonzalez Change <created> to <added> and display in output. Fixes #33.
scottgonzalez authored
11 <added>1.0</added>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
12 <options>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
13 <option name="active" default="0">
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid an…
jzaefferer authored
14 <desc>
15 The zero-based index of the panel that is active (open). A negative value select panels going backward from the last panel.
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
16 <p>When the <a href="#option-collapsible"><code>collapsible</code></a> option is set to <code>true</code>, a value of <code>false</code> closes all panels; otherwise nothing happens.</p>
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid an…
jzaefferer authored
17 </desc>
18 <type name="Boolean" />
19 <type name="Number" />
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
20 </option>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
21 <option name="collapsible" default="false">
22 <desc>When set to <code>true</code>, the active panel can be closed.</desc>
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid an…
jzaefferer authored
23 <type name="Boolean" />
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
24 </option>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
25 <option name="disabled" default="false">
26 <desc>When set to <code>true</code> or <code>false</code>, all panels will be disabled or enabled, respectively. Can also be set to an array containing the indexes of the tabs (zero-based) that should be disabled, e.g., <code>[ 0, 2 ]</code> would disable the first and third tab.</desc>
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid an…
jzaefferer authored
27 <type name="Boolean" />
28 <type name="Array" />
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
29 </option>
27af62e @scottgonzalez Tabs: Don't double define type of event option.
scottgonzalez authored
30 <option name="event" default='"click"'>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
31 <desc>The type of event that the tabs should react to in order to activate the tab. To activate on hover, use <code>"mouseover"</code>.</desc>
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid an…
jzaefferer authored
32 <type name="String" />
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
33 </option>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
34 <option name="heightStyle" default='"auto"'>
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid an…
jzaefferer authored
35 <desc>
36 Controls the height of the tabs widget and each panel. Possible values:
37 <ul>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
38 <li><code>"auto"</code>: All panels will be set to the height of the tallest panel.</li>
39 <li><code>"fill"</code>: Expand to the available height based on the tabs' parent height.</li>
40 <li><code>"content"</code>: Each panel will be only as tall as its content.</li>
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid an…
jzaefferer authored
41 </ul>
42 </desc>
43 <type name="String" />
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
44 </option>
8d47e08 @scottgonzalez Made hide and show options into includes.
scottgonzalez authored
45 <xi:include href="../includes/widget-option-hide.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
46 <xi:include href="../includes/widget-option-show.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
47 </options>
48 <events>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
49 <event name="activate" type="accordionactivate">
50 <desc>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.</desc>
3e236c2 @scottgonzalez Cleaned up events.
scottgonzalez authored
51 <argument name="event" type="Event"/>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
52 <argument name="ui" type="Object">
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
53 <property name="newTab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
54 <desc>The tab that was just activated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
55 </property>
56 <property name="oldTab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
57 <desc>The tab that was just deactivated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
58 </property>
59 <property name="newPanel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
60 <desc>The panel that was just activated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
61 </property>
62 <property name="oldPanel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
63 <desc>The panel that was just deactivated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
64 </property>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
65 </argument>
66 </event>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
67 <event name="beforeActivate" type="accordionbeforeactivate">
ab9660e @scottgonzalez Whitespace.
scottgonzalez authored
68 <desc>Triggered directly after 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>
3e236c2 @scottgonzalez Cleaned up events.
scottgonzalez authored
69 <argument name="event" type="Event"/>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
70 <argument name="ui" type="Object">
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
71 <property name="newTab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
72 <desc>The tab that is about to be activated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
73 </property>
74 <property name="oldTab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
75 <desc>The tab that is about to be deactivated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
76 </property>
77 <property name="newPanel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
78 <desc>The panel that is about to be activated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
79 </property>
80 <property name="oldPanel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
81 <desc>The panel that is about to be deactivated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
82 </property>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
83 </argument>
84 </event>
7dbf536 @jzaefferer Tabs: Update events to 1.9 API
jzaefferer authored
85 <event name="beforeLoad" type="tabsload">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
86 <desc>Triggered when a remote tab is about to be loaded, after the <a href="#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>.</desc>
3e236c2 @scottgonzalez Cleaned up events.
scottgonzalez authored
87 <argument name="event" type="Event"/>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
88 <argument name="ui" type="Object">
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
89 <property name="tab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
90 <desc>The tab that is being loaded.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
91 </property>
92 <property name="panel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
93 <desc>The panel which will be populated by the Ajax response.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
94 </property>
ad0daab @scottgonzalez Tabs: Improved event documentation.
scottgonzalez authored
95 <property name="jqXHR" type="jqXHR">
96 <desc>The <code>jqXHR</code> object that is requesting the content.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
97 </property>
98 <property name="ajaxSettings" type="Object">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
99 <desc>The settings that will be used by <a href="//api.jquery.com/jQuery.ajax"><code>jQuery.ajax</code></a> to request the content.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
100 </property>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
101 </argument>
102 </event>
ad0daab @scottgonzalez Tabs: Improved event documentation.
scottgonzalez authored
103 <event name="create">
104 <desc>Triggered when the tabs are created. If the tabs are collapsed, <code>ui.tab</code> and <code>ui.panel</code> will be empty jQuery objects.</desc>
3e236c2 @scottgonzalez Cleaned up events.
scottgonzalez authored
105 <argument name="event" type="Event"/>
ad0daab @scottgonzalez Tabs: Improved event documentation.
scottgonzalez authored
106 <argument name="ui" type="Object">
107 <property name="tab" type="jQuery">
108 <desc>The active tab.</desc>
109 </property>
110 <property name="panel" type="jQuery">
111 <desc>The active panel.</desc>
112 </property>
113 </argument>
114 </event>
7dbf536 @jzaefferer Tabs: Update events to 1.9 API
jzaefferer authored
115 <event name="load" type="tabsload">
116 <desc>Triggered after a remote tab has been loaded.</desc>
3e236c2 @scottgonzalez Cleaned up events.
scottgonzalez authored
117 <argument name="event" type="Event"/>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
118 <argument name="ui" type="Object">
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
119 <property name="tab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
120 <desc>The tab that was just loaded.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
121 </property>
122 <property name="panel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
123 <desc>The panel which was just populated by the Ajax response.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
124 </property>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
125 </argument>
126 </event>
127 </events>
128 <methods>
c6ac15f @scottgonzalez Updated widget factory and base widget docs.
scottgonzalez authored
129 <xi:include href="../includes/widget-method-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
130 <xi:include href="../includes/widget-method-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
131 <method name="disable">
65d34f9 @jzaefferer Tabs: Update methods to 1.9 API
jzaefferer authored
132 <desc>
ad0daab @scottgonzalez Tabs: Improved event documentation.
scottgonzalez authored
133 Disables a tab. The selected tab cannot be disabled. To disable more than one tab at once, set the <a href="#option-disabled"><code>disabled</code></a> option: <code>$( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] )</code>.
65d34f9 @jzaefferer Tabs: Update methods to 1.9 API
jzaefferer authored
134 </desc>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
135 <argument name="index" type="Number, String">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
136 <desc>The zero-based index of the tab to be disabled. Instead of an index, the <code>href</code> of the tab may be passed.</desc>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
137 </argument>
138 </method>
c6ac15f @scottgonzalez Updated widget factory and base widget docs.
scottgonzalez authored
139 <xi:include href="../includes/widget-method-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
6b2fe03 @jzaefferer Add disable/enable/option/widget methods
jzaefferer authored
140 <method name="enable">
65d34f9 @jzaefferer Tabs: Update methods to 1.9 API
jzaefferer authored
141 <desc>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
142 Enables a tab. To enable more than one tab at once reset the disabled property like: <code>$( "#example" ).tabs( "option", "disabled", [] );</code>.
65d34f9 @jzaefferer Tabs: Update methods to 1.9 API
jzaefferer authored
143 </desc>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
144 <argument name="index" type="Number, String">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
145 <desc>The zero-based index of the tab to be enabled. Instead of an index, the <code>href</code> of the tab may be passed.</desc>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
146 </argument>
147 </method>
148 <method name="load">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
149 <desc>Loads the panel content of a remote tab.</desc>
65d34f9 @jzaefferer Tabs: Update methods to 1.9 API
jzaefferer authored
150 <argument name="index" type="Number, String">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
151 <desc>The zero-baesd index of the tab the be loaded. Instead of an index, the <code>href</code> of the tab may be passed.</desc>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
152 </argument>
153 </method>
6c710f7 @scottgonzalez Renamed inherits to includes.
scottgonzalez authored
154 <xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
c6ac15f @scottgonzalez Updated widget factory and base widget docs.
scottgonzalez authored
155 <xi:include href="../includes/widget-method-widget.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
156 </methods>
157 <example>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
158 <desc>A simple jQuery UI Tabs</desc>
159 <code><![CDATA[
160 $( "#tabs" ).tabs();
161 ]]></code>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
162 <html><![CDATA[
163 <div id="tabs">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
164 <ul>
165 <li><a href="#fragment-1"><span>One</span></a></li>
166 <li><a href="#fragment-2"><span>Two</span></a></li>
167 <li><a href="#fragment-3"><span>Three</span></a></li>
168 </ul>
169 <div id="fragment-1">
170 <p>First tab is active by default:</p>
171 <pre><code>$( "#tabs" ).tabs(); </code></pre>
172 </div>
173 <div id="fragment-2">
174 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
175 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
176 </div>
177 <div id="fragment-3">
178 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
179 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
180 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
181 </div>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
182 </div>
183 ]]></html>
184 </example>
80ecaf4 @rdworth Fixed entries2html based on the one in api.jquery.com to put the scri…
rdworth authored
185 <category slug="widgets"/>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
186 </entry>
Something went wrong with that request. Please try again.