Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 201 lines (199 sloc) 9.877 kb
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
1 <?xml version="1.0"?>
22fafb3 @rdworth Fixed relative urls of xslt
rdworth authored
2 <?xml-stylesheet type="text/xsl" href="../entries2html.xsl" ?>
343cc8f @scottgonzalez Cleanup.
scottgonzalez authored
3 <entry name="tabs" namespace="fn" type="widget" widgetnamespace="ui">
12f32df @scottgonzalez Added <title> for page titles.
scottgonzalez authored
4 <title>Tabs Widget</title>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
5 <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
6 <longdesc>
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid anywa...
jzaefferer authored
7 <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
8
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
9 <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
10 </longdesc>
21606fa @scottgonzalez Moved functional CSS comment into resuable note.
scottgonzalez authored
11 <note id="functional-css"/>
24e33d1 @scottgonzalez Change <created> to <added> and display in output. Fixes #33.
scottgonzalez authored
12 <added>1.0</added>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
13 <options>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
14 <option name="active" default="0">
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid anywa...
jzaefferer authored
15 <desc>
16 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
17 <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 anywa...
jzaefferer authored
18 </desc>
19 <type name="Boolean" />
20 <type name="Number" />
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
21 </option>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
22 <option name="collapsible" default="false">
23 <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 anywa...
jzaefferer authored
24 <type name="Boolean" />
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
25 </option>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
26 <option name="disabled" default="false">
27 <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 anywa...
jzaefferer authored
28 <type name="Boolean" />
29 <type name="Array" />
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
30 </option>
27af62e @scottgonzalez Tabs: Don't double define type of event option.
scottgonzalez authored
31 <option name="event" default='"click"'>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
32 <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 anywa...
jzaefferer authored
33 <type name="String" />
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
34 </option>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
35 <option name="heightStyle" default='"auto"'>
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid anywa...
jzaefferer authored
36 <desc>
37 Controls the height of the tabs widget and each panel. Possible values:
38 <ul>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
39 <li><code>"auto"</code>: All panels will be set to the height of the tallest panel.</li>
40 <li><code>"fill"</code>: Expand to the available height based on the tabs' parent height.</li>
41 <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 anywa...
jzaefferer authored
42 </ul>
43 </desc>
44 <type name="String" />
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
45 </option>
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid anywa...
jzaefferer authored
46 <option name="hide" default="true">
47 <desc>How to hide a panel.</desc>
48 <type name="Boolean" />
49 <type name="Object" />
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
50 </option>
0acbbf4 @jzaefferer Tabs: Cleanup description, removing the pseudo-FAQ (mostly invalid anywa...
jzaefferer authored
51 <option name="show" default="true">
52 <desc>How to show a panel.</desc>
53 <type name="Boolean" />
54 <type name="Object" />
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
55 </option>
56 </options>
57 <events>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
58 <event name="activate" type="accordionactivate">
59 <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>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
60 <argument name="event" type="Event">
61 </argument>
62 <argument name="ui" type="Object">
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
63 <property name="newTab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
64 <desc>The tab that was just activated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
65 </property>
66 <property name="oldTab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
67 <desc>The tab that was just deactivated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
68 </property>
69 <property name="newPanel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
70 <desc>The panel that was just activated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
71 </property>
72 <property name="oldPanel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
73 <desc>The panel that was just deactivated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
74 </property>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
75 </argument>
76 </event>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
77 <event name="beforeActivate" type="accordionbeforeactivate">
ab9660e @scottgonzalez Whitespace.
scottgonzalez authored
78 <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>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
79 <argument name="event" type="Event">
80 </argument>
81 <argument name="ui" type="Object">
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
82 <property name="newTab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
83 <desc>The tab that is about to be activated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
84 </property>
85 <property name="oldTab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
86 <desc>The tab that is about to be deactivated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
87 </property>
88 <property name="newPanel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
89 <desc>The panel that is about to be activated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
90 </property>
91 <property name="oldPanel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
92 <desc>The panel that is about to be deactivated.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
93 </property>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
94 </argument>
95 </event>
7dbf536 @jzaefferer Tabs: Update events to 1.9 API
jzaefferer authored
96 <event name="beforeLoad" type="tabsload">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
97 <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>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
98 <argument name="event" type="Event">
99 </argument>
100 <argument name="ui" type="Object">
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
101 <property name="tab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
102 <desc>The tab that is being loaded.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
103 </property>
104 <property name="panel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
105 <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
106 </property>
ad0daab @scottgonzalez Tabs: Improved event documentation.
scottgonzalez authored
107 <property name="jqXHR" type="jqXHR">
108 <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
109 </property>
110 <property name="ajaxSettings" type="Object">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
111 <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
112 </property>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
113 </argument>
114 </event>
ad0daab @scottgonzalez Tabs: Improved event documentation.
scottgonzalez authored
115 <event name="create">
116 <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>
117 <argument name="event" type="Event">
118 </argument>
119 <argument name="ui" type="Object">
120 <property name="tab" type="jQuery">
121 <desc>The active tab.</desc>
122 </property>
123 <property name="panel" type="jQuery">
124 <desc>The active panel.</desc>
125 </property>
126 </argument>
127 </event>
7dbf536 @jzaefferer Tabs: Update events to 1.9 API
jzaefferer authored
128 <event name="load" type="tabsload">
129 <desc>Triggered after a remote tab has been loaded.</desc>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
130 <argument name="event" type="Event">
131 </argument>
132 <argument name="ui" type="Object">
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
133 <property name="tab" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
134 <desc>The tab that was just loaded.</desc>
5e33f3e @kborchers Added missing ui-event props and some missing events
kborchers authored
135 </property>
136 <property name="panel" type="jQuery">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
137 <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
138 </property>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
139 </argument>
140 </event>
141 </events>
142 <methods>
6c710f7 @scottgonzalez Renamed inherits to includes.
scottgonzalez authored
143 <xi:include href="../includes/widget-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
144 <xi:include href="../includes/widget-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
145 <method name="disable">
65d34f9 @jzaefferer Tabs: Update methods to 1.9 API
jzaefferer authored
146 <desc>
ad0daab @scottgonzalez Tabs: Improved event documentation.
scottgonzalez authored
147 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
148 </desc>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
149 <argument name="index" type="Number, String">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
150 <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
151 </argument>
152 </method>
6c710f7 @scottgonzalez Renamed inherits to includes.
scottgonzalez authored
153 <xi:include href="../includes/widget-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
6b2fe03 @jzaefferer Add disable/enable/option/widget methods
jzaefferer authored
154 <method name="enable">
65d34f9 @jzaefferer Tabs: Update methods to 1.9 API
jzaefferer authored
155 <desc>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
156 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
157 </desc>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
158 <argument name="index" type="Number, String">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
159 <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
160 </argument>
161 </method>
162 <method name="load">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
163 <desc>Loads the panel content of a remote tab.</desc>
65d34f9 @jzaefferer Tabs: Update methods to 1.9 API
jzaefferer authored
164 <argument name="index" type="Number, String">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
165 <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
166 </argument>
167 </method>
6c710f7 @scottgonzalez Renamed inherits to includes.
scottgonzalez authored
168 <xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
169 <xi:include href="../includes/widget-widget.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
170 </methods>
171 <example>
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
172 <desc>A simple jQuery UI Tabs</desc>
173 <code><![CDATA[
174 $( "#tabs" ).tabs();
175 ]]></code>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
176 <html><![CDATA[
177 <div id="tabs">
f2a0b66 @scottgonzalez Tabs: Cleanup.
scottgonzalez authored
178 <ul>
179 <li><a href="#fragment-1"><span>One</span></a></li>
180 <li><a href="#fragment-2"><span>Two</span></a></li>
181 <li><a href="#fragment-3"><span>Three</span></a></li>
182 </ul>
183 <div id="fragment-1">
184 <p>First tab is active by default:</p>
185 <pre><code>$( "#tabs" ).tabs(); </code></pre>
186 </div>
187 <div id="fragment-2">
188 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
189 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
190 </div>
191 <div id="fragment-3">
192 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
193 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
194 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
195 </div>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
196 </div>
197 ]]></html>
198 </example>
80ecaf4 @rdworth Fixed entries2html based on the one in api.jquery.com to put the script ...
rdworth authored
199 <category slug="widgets"/>
f1b270b @rdworth Initial import from jquery-docs repo. New home :)
rdworth authored
200 </entry>
Something went wrong with that request. Please try again.