Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 262 lines (256 sloc) 12.873 kb
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
1 <?xml version="1.0"?>
21f6c28 Scott González 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 Scott González Added <title> for page titles.
scottgonzalez authored
3 <title>Tabs Widget</title>
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
4 <desc>A single content area with multiple panels, each associated with a header in a list.</desc>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
5 <longdesc>
0acbbf4 Jörn Zaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid anywa...
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 Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
7
f2a0b66 Scott González 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>
675a0b0 Scott González Tabs: Added keyboard interaction notes.
scottgonzalez authored
9
10 <h3>Keyboard interaction</h3>
11
12 <p>When focus is on a tab, the following key commands are available:</p>
13 <ul>
14 <li>UP/LEFT: Move focus to the previous tab. If on first tab, moves focus to last tab. Activate focused tab after a short delay.</li>
15 <li>DOWN/RIGHT: Move focus to the next tab. If on last tab, moves focus to first tab. Activate focused tab after a short delay.</li>
16 <li>HOME: Move focus to the first tab. Activate focused tab after a short delay.</li>
17 <li>END: Move focus to the last tab. Activate focused tab after a short delay.</li>
18 <li>SPACE: Activate panel associated with focused tab.</li>
19 <li>ENTER: Activate or toggle panel associated with focused tab.</li>
20 <li>ALT+PAGE UP: Move focus to the previous tab and immediately activate.</li>
21 <li>ALT+PAGE DOWN: Move focus to the next tab and immediately activate.</li>
22 </ul>
23
24 <p>When focus is in a panel, the following key commands are available:</p>
25 <ul>
26 <li>CTRL+UP: Move focus to associated tab.</li>
27 <li>ALT+PAGE UP: Move focus to the previous tab and immediately activate.</li>
28 <li>ALT+PAGE DOWN: Move focus to the next tab and immediately activate.</li>
29 </ul>
9176459 Scott González Added dependency lists for widgets. Fixes #48.
scottgonzalez authored
30
31 <h3>Dependencies</h3>
32 <ul>
33 <li><a href="/category/ui-core/">UI Core</a></li>
34 <li><a href="/jQuery.widget/">Widget Factory</a></li>
35 <li><a href="/category/effects-core/">Effects Core</a> (optional; for use with the <a href="#option-show"><code>show</code></a> and <a href="#option-hide"><code>hide</code></a> options)</li>
36 </ul>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
37 </longdesc>
21606fa Scott González Moved functional CSS comment into resuable note.
scottgonzalez authored
38 <note id="functional-css"/>
24e33d1 Scott González Change <created> to <added> and display in output. Fixes #33.
scottgonzalez authored
39 <added>1.0</added>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
40 <options>
07529f7 Jörn Zaefferer Tabs: Added option examples.
jzaefferer authored
41 <option name="active" default="0" example-value="1">
0acbbf4 Jörn Zaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid anywa...
jzaefferer authored
42 <desc>
e0a39e0 Scott González Tabs: Updated docs.
scottgonzalez authored
43 Which panel is currently open.
0acbbf4 Jörn Zaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid anywa...
jzaefferer authored
44 </desc>
e0a39e0 Scott González Tabs: Updated docs.
scottgonzalez authored
45 <type name="Boolean">
46 <desc>Setting <code>active</code> to <code>false</code> will collapse all panels. This requires the <a href="#option-collapsible"><code>collapsible</code></a> option to be <code>true</code>.</desc>
47 </type>
48 <type name="Integer">
49 <desc>The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.</desc>
50 </type>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
51 </option>
07529f7 Jörn Zaefferer Tabs: Added option examples.
jzaefferer authored
52 <option name="collapsible" type="Boolean" default="false" example-value="true">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
53 <desc>When set to <code>true</code>, the active panel can be closed.</desc>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
54 </option>
07529f7 Jörn Zaefferer Tabs: Added option examples.
jzaefferer authored
55 <option name="disabled" default="false" example-value="[ 0, 2 ]">
56 <desc>Which tabs are disabled.</desc>
e0a39e0 Scott González Tabs: Updated docs.
scottgonzalez authored
57 <type name="Boolean">
58 <desc>Enable or disable all tabs.</desc>
59 </type>
60 <type name="Array">
61 <desc>An array containing the zero-based indexes of the tabs that should be disabled, e.g., <code>[ 0, 2 ]</code> would disable the first and third tab.</desc>
62 </type>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
63 </option>
07529f7 Jörn Zaefferer Tabs: Added option examples.
jzaefferer authored
64 <option name="event" type="String" default='"click"' example-value='"mouseover"'>
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
65 <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>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
66 </option>
07529f7 Jörn Zaefferer Tabs: Added option examples.
jzaefferer authored
67 <option name="heightStyle" type="String" default='"content"' example-value='"fill"'>
0acbbf4 Jörn Zaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid anywa...
jzaefferer authored
68 <desc>
69 Controls the height of the tabs widget and each panel. Possible values:
70 <ul>
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
71 <li><code>"auto"</code>: All panels will be set to the height of the tallest panel.</li>
72 <li><code>"fill"</code>: Expand to the available height based on the tabs' parent height.</li>
73 <li><code>"content"</code>: Each panel will be only as tall as its content.</li>
0acbbf4 Jörn Zaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid anywa...
jzaefferer authored
74 </ul>
75 </desc>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
76 </option>
8d47e08 Scott González Made hide and show options into includes.
scottgonzalez authored
77 <xi:include href="../includes/widget-option-hide.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
78 <xi:include href="../includes/widget-option-show.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
79 </options>
80 <events>
f6592f3 Scott González Removed widget event types, added event prefixes.
scottgonzalez authored
81 <event name="activate">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
82 <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 Scott González Cleaned up events.
scottgonzalez authored
83 <argument name="event" type="Event"/>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
84 <argument name="ui" type="Object">
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
85 <property name="newTab" type="jQuery">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
86 <desc>The tab that was just activated.</desc>
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
87 </property>
88 <property name="oldTab" type="jQuery">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
89 <desc>The tab that was just deactivated.</desc>
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
90 </property>
91 <property name="newPanel" type="jQuery">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
92 <desc>The panel that was just activated.</desc>
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
93 </property>
94 <property name="oldPanel" type="jQuery">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
95 <desc>The panel that was just deactivated.</desc>
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
96 </property>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
97 </argument>
98 </event>
f6592f3 Scott González Removed widget event types, added event prefixes.
scottgonzalez authored
99 <event name="beforeActivate">
ab9660e Scott González Whitespace.
scottgonzalez authored
100 <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 Scott González Cleaned up events.
scottgonzalez authored
101 <argument name="event" type="Event"/>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
102 <argument name="ui" type="Object">
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
103 <property name="newTab" type="jQuery">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
104 <desc>The tab that is about to be activated.</desc>
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
105 </property>
106 <property name="oldTab" type="jQuery">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
107 <desc>The tab that is about to be deactivated.</desc>
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
108 </property>
109 <property name="newPanel" type="jQuery">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
110 <desc>The panel that is about to be activated.</desc>
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
111 </property>
112 <property name="oldPanel" type="jQuery">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
113 <desc>The panel that is about to be deactivated.</desc>
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
114 </property>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
115 </argument>
116 </event>
f6592f3 Scott González Removed widget event types, added event prefixes.
scottgonzalez authored
117 <event name="beforeLoad">
4844909 Scott González Tabs: Added note about restrictions on changing ajaxSettings inside befo...
scottgonzalez authored
118 <desc>
119 <p>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>.</p>
4b33c1d Scott González Use protocol-relative URLs.
scottgonzalez authored
120 <p><em>Note: Although <code>ui.ajaxSettings</code> is provided and can be modified, some of these settings have already been processed by jQuery. For example, <a href="//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 <a href="//api.jquery.com/jQuery.ajax/"><code>jQuery.ajax()</code></a>.</em></p>
4844909 Scott González Tabs: Added note about restrictions on changing ajaxSettings inside befo...
scottgonzalez authored
121 </desc>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
122 <argument name="ui" type="Object">
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
123 <property name="tab" type="jQuery">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
124 <desc>The tab that is being loaded.</desc>
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
125 </property>
126 <property name="panel" type="jQuery">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
127 <desc>The panel which will be populated by the Ajax response.</desc>
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
128 </property>
ad0daab Scott González Tabs: Improved event documentation.
scottgonzalez authored
129 <property name="jqXHR" type="jqXHR">
130 <desc>The <code>jqXHR</code> object that is requesting the content.</desc>
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
131 </property>
132 <property name="ajaxSettings" type="Object">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
133 <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 Kris Borchers Added missing ui-event props and some missing events
kborchers authored
134 </property>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
135 </argument>
136 </event>
ad0daab Scott González Tabs: Improved event documentation.
scottgonzalez authored
137 <event name="create">
138 <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 Scott González Cleaned up events.
scottgonzalez authored
139 <argument name="event" type="Event"/>
ad0daab Scott González Tabs: Improved event documentation.
scottgonzalez authored
140 <argument name="ui" type="Object">
141 <property name="tab" type="jQuery">
142 <desc>The active tab.</desc>
143 </property>
144 <property name="panel" type="jQuery">
145 <desc>The active panel.</desc>
146 </property>
147 </argument>
148 </event>
f6592f3 Scott González Removed widget event types, added event prefixes.
scottgonzalez authored
149 <event name="load">
7dbf536 Jörn Zaefferer Tabs: Update events to 1.9 API
jzaefferer authored
150 <desc>Triggered after a remote tab has been loaded.</desc>
3e236c2 Scott González Cleaned up events.
scottgonzalez authored
151 <argument name="event" type="Event"/>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
152 <argument name="ui" type="Object">
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
153 <property name="tab" type="jQuery">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
154 <desc>The tab that was just loaded.</desc>
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
155 </property>
156 <property name="panel" type="jQuery">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
157 <desc>The panel which was just populated by the Ajax response.</desc>
5e33f3e Kris Borchers Added missing ui-event props and some missing events
kborchers authored
158 </property>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
159 </argument>
160 </event>
161 </events>
162 <methods>
c6ac15f Scott González Updated widget factory and base widget docs.
scottgonzalez authored
163 <xi:include href="../includes/widget-method-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
164 <method name="disable">
35bec54 Scott González Tabs: Don't duplicate <method>s with the same name.
scottgonzalez authored
165 <signature>
166 <desc>Disables all tabs.</desc>
167 </signature>
3e97a79 Jörn Zaefferer Add examples for methods. Partial fix for #64
jzaefferer authored
168 <signature example-params='1'>
35bec54 Scott González Tabs: Don't duplicate <method>s with the same name.
scottgonzalez authored
169 <desc>
170 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>.
171 </desc>
172 <argument name="index">
173 <desc>Which tab to disable.</desc>
174 <type name="Number">
175 <desc>The zero-based index of the tab to disable.</desc>
176 </type>
177 <type name="String">
178 <desc>The <code>href</code> of the tab to disable.</desc>
179 </type>
180 </argument>
181 </signature>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
182 </method>
6b2fe03 Jörn Zaefferer Add disable/enable/option/widget methods
jzaefferer authored
183 <method name="enable">
35bec54 Scott González Tabs: Don't duplicate <method>s with the same name.
scottgonzalez authored
184 <signature>
185 <desc>Enables all tabs.</desc>
186 </signature>
3e97a79 Jörn Zaefferer Add examples for methods. Partial fix for #64
jzaefferer authored
187 <signature example-params='1'>
35bec54 Scott González Tabs: Don't duplicate <method>s with the same name.
scottgonzalez authored
188 <desc>Enables a tab. To enable more than one tab at once reset the disabled property like: <code>$( "#example" ).tabs( "option", "disabled", [] );</code>.</desc>
189 <argument name="index">
190 <desc>Which tab to enable.</desc>
191 <type name="Number">
192 <desc>The zero-based index of the tab to enable.</desc>
193 </type>
194 <type name="String">
195 <desc>The <code>href</code> of the tab to enable.</desc>
196 </type>
197 </argument>
198 </signature>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
199 </method>
3e97a79 Jörn Zaefferer Add examples for methods. Partial fix for #64
jzaefferer authored
200 <method name="load" example-params='1'>
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
201 <desc>Loads the panel content of a remote tab.</desc>
e0a39e0 Scott González Tabs: Updated docs.
scottgonzalez authored
202 <argument name="index">
203 <desc>Which tab to load.</desc>
204 <type name="Number">
205 <desc>The zero-based index of the tab to load.</desc>
206 </type>
207 <type name="String">
208 <desc>The <code>href</code> of the tab to load.</desc>
209 </type>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
210 </argument>
211 </method>
6c710f7 Scott González Renamed inherits to includes.
scottgonzalez authored
212 <xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
2438639 Scott González Tabs: Added refresh() method.
scottgonzalez authored
213 <method name="refresh">
214 <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 <a href="#option-heightStyle"><code>heightStyle</code></a> option.</desc>
215 </method>
c6ac15f Scott González Updated widget factory and base widget docs.
scottgonzalez authored
216 <xi:include href="../includes/widget-method-widget.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
217 </methods>
8b11ff4 Scott González Tabs: Document _getList() extension point
scottgonzalez authored
218 <extension-points>
2f7cb4f Scott González Tabs: Fix return type for _getList()
scottgonzalez authored
219 <method name="_getList" return="jQuery">
8b11ff4 Scott González Tabs: Document _getList() extension point
scottgonzalez authored
220 <desc>Determine which list should be converted to tabs. By default the first descendant list is used.</desc>
221 <example>
222 <desc>Use the list with the class <code>my-tabs</code> or fall back to the default implementation.</desc>
223 <code><![CDATA[
224 _getList: function() {
225 var list = this.element.find( ".my-tabs" );
226 return list.length ? list.eq( 0 ) : this._super();
227 }
228 ]]></code>
229 </example>
230 </method>
231 </extension-points>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
232 <example>
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
233 <desc>A simple jQuery UI Tabs</desc>
234 <code><![CDATA[
235 $( "#tabs" ).tabs();
236 ]]></code>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
237 <html><![CDATA[
238 <div id="tabs">
f2a0b66 Scott González Tabs: Cleanup.
scottgonzalez authored
239 <ul>
240 <li><a href="#fragment-1"><span>One</span></a></li>
241 <li><a href="#fragment-2"><span>Two</span></a></li>
242 <li><a href="#fragment-3"><span>Three</span></a></li>
243 </ul>
244 <div id="fragment-1">
245 <p>First tab is active by default:</p>
246 <pre><code>$( "#tabs" ).tabs(); </code></pre>
247 </div>
248 <div id="fragment-2">
249 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
250 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
251 </div>
252 <div id="fragment-3">
253 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
254 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
255 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
256 </div>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
257 </div>
258 ]]></html>
259 </example>
80ecaf4 Richard D. Worth Fixed entries2html based on the one in api.jquery.com to put the script ...
rdworth authored
260 <category slug="widgets"/>
f1b270b Richard D. Worth Initial import from jquery-docs repo. New home :)
rdworth authored
261 </entry>
Something went wrong with that request. Please try again.