Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 262 lines (256 sloc) 12.874 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>
675a0b0 @scottgonzalez 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 @scottgonzalez 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 @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
37 </longdesc>
21606fa @scottgonzalez Moved functional CSS comment into resuable note.
scottgonzalez authored
38 <note id="functional-css"/>
24e33d1 @scottgonzalez Change <created> to <added> and display in output. Fixes #33.
scottgonzalez authored
39 <added>1.0</added>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
40 <options>
07529f7 @jzaefferer Tabs: Added option examples.
jzaefferer authored
41 <option name="active" default="0" example-value="1">
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid an…
jzaefferer authored
42 <desc>
e0a39e0 @scottgonzalez Tabs: Updated docs.
scottgonzalez authored
43 Which panel is currently open.
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid an…
jzaefferer authored
44 </desc>
e0a39e0 @scottgonzalez 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 @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
51 </option>
07529f7 @jzaefferer Tabs: Added option examples.
jzaefferer authored
52 <option name="collapsible" type="Boolean" default="false" example-value="true">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
53 <desc>When set to <code>true</code>, the active panel can be closed.</desc>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
54 </option>
07529f7 @jzaefferer Tabs: Added option examples.
jzaefferer authored
55 <option name="disabled" default="false" example-value="[ 0, 2 ]">
56 <desc>Which tabs are disabled.</desc>
e0a39e0 @scottgonzalez 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 @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
63 </option>
07529f7 @jzaefferer Tabs: Added option examples.
jzaefferer authored
64 <option name="event" type="String" default='"click"' example-value='"mouseover"'>
f2a0b66 @scottgonzalez 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 @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
66 </option>
07529f7 @jzaefferer Tabs: Added option examples.
jzaefferer authored
67 <option name="heightStyle" type="String" default='"content"' example-value='"fill"'>
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid an…
jzaefferer authored
68 <desc>
69 Controls the height of the tabs widget and each panel. Possible values:
70 <ul>
f2a0b66 @scottgonzalez 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 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid an…
jzaefferer authored
74 </ul>
75 </desc>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
76 </option>
8d47e08 @scottgonzalez 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 @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
79 </options>
80 <events>
f6592f3 @scottgonzalez Removed widget event types, added event prefixes.
scottgonzalez authored
81 <event name="activate">
f2a0b66 @scottgonzalez 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 @scottgonzalez Cleaned up events.
scottgonzalez authored
83 <argument name="event" type="Event"/>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
84 <argument name="ui" type="Object">
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
85 <property name="newTab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
86 <desc>The tab that was just activated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
87 </property>
88 <property name="oldTab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
89 <desc>The tab that was just deactivated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
90 </property>
91 <property name="newPanel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
92 <desc>The panel that was just activated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
93 </property>
94 <property name="oldPanel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
95 <desc>The panel that was just deactivated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
96 </property>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
97 </argument>
98 </event>
f6592f3 @scottgonzalez Removed widget event types, added event prefixes.
scottgonzalez authored
99 <event name="beforeActivate">
ab9660e @scottgonzalez 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 @scottgonzalez Cleaned up events.
scottgonzalez authored
101 <argument name="event" type="Event"/>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
102 <argument name="ui" type="Object">
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
103 <property name="newTab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
104 <desc>The tab that is about to be activated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
105 </property>
106 <property name="oldTab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
107 <desc>The tab that is about to be deactivated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
108 </property>
109 <property name="newPanel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
110 <desc>The panel that is about to be activated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
111 </property>
112 <property name="oldPanel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
113 <desc>The panel that is about to be deactivated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
114 </property>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
115 </argument>
116 </event>
f6592f3 @scottgonzalez Removed widget event types, added event prefixes.
scottgonzalez authored
117 <event name="beforeLoad">
4844909 @scottgonzalez Tabs: Added note about restrictions on changing ajaxSettings inside b…
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 @scottgonzalez 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 @scottgonzalez Tabs: Added note about restrictions on changing ajaxSettings inside b…
scottgonzalez authored
121 </desc>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
122 <argument name="ui" type="Object">
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
123 <property name="tab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
124 <desc>The tab that is being loaded.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
125 </property>
126 <property name="panel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
127 <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
128 </property>
ad0daab @scottgonzalez 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 @kborchers Added missing ui-event props and some missing events
kborchers authored
131 </property>
132 <property name="ajaxSettings" type="Object">
47bd255 @agcolom various files: added the missing trailing slash in links, based on re…
agcolom 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 @kborchers Added missing ui-event props and some missing events
kborchers authored
134 </property>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
135 </argument>
136 </event>
ad0daab @scottgonzalez 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 @scottgonzalez Cleaned up events.
scottgonzalez authored
139 <argument name="event" type="Event"/>
ad0daab @scottgonzalez 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 @scottgonzalez Removed widget event types, added event prefixes.
scottgonzalez authored
149 <event name="load">
7dbf536 @jzaefferer Tabs: Update events to 1.9 API
jzaefferer authored
150 <desc>Triggered after a remote tab has been loaded.</desc>
3e236c2 @scottgonzalez Cleaned up events.
scottgonzalez authored
151 <argument name="event" type="Event"/>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
152 <argument name="ui" type="Object">
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
153 <property name="tab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
154 <desc>The tab that was just loaded.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
155 </property>
156 <property name="panel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
157 <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
158 </property>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
159 </argument>
160 </event>
161 </events>
162 <methods>
c6ac15f @scottgonzalez 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 @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
164 <method name="disable">
35bec54 @scottgonzalez Tabs: Don't duplicate <method>s with the same name.
scottgonzalez authored
165 <signature>
166 <desc>Disables all tabs.</desc>
167 </signature>
3e97a79 @jzaefferer Add examples for methods. Partial fix for #64
jzaefferer authored
168 <signature example-params='1'>
35bec54 @scottgonzalez 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 @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
182 </method>
6b2fe03 @jzaefferer Add disable/enable/option/widget methods
jzaefferer authored
183 <method name="enable">
35bec54 @scottgonzalez Tabs: Don't duplicate <method>s with the same name.
scottgonzalez authored
184 <signature>
185 <desc>Enables all tabs.</desc>
186 </signature>
3e97a79 @jzaefferer Add examples for methods. Partial fix for #64
jzaefferer authored
187 <signature example-params='1'>
35bec54 @scottgonzalez 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 @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
199 </method>
3e97a79 @jzaefferer Add examples for methods. Partial fix for #64
jzaefferer authored
200 <method name="load" example-params='1'>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
201 <desc>Loads the panel content of a remote tab.</desc>
e0a39e0 @scottgonzalez 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 @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
210 </argument>
211 </method>
6c710f7 @scottgonzalez Renamed inherits to includes.
scottgonzalez authored
212 <xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
2438639 @scottgonzalez 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 @scottgonzalez 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 @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
217 </methods>
8b11ff4 @scottgonzalez Tabs: Document _getList() extension point
scottgonzalez authored
218 <extension-points>
2f7cb4f @scottgonzalez Tabs: Fix return type for _getList()
scottgonzalez authored
219 <method name="_getList" return="jQuery">
8b11ff4 @scottgonzalez 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 @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
232 <example>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
233 <desc>A simple jQuery UI Tabs</desc>
234 <code><![CDATA[
235 $( "#tabs" ).tabs();
236 ]]></code>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
237 <html><![CDATA[
238 <div id="tabs">
f2a0b66 @scottgonzalez 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 @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
257 </div>
258 ]]></html>
259 </example>
80ecaf4 @rdworth Fixed entries2html based on the one in api.jquery.com to put the scri…
rdworth authored
260 <category slug="widgets"/>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
261 </entry>
Something went wrong with that request. Please try again.