5 * Copyright 2012 jQuery Foundation and other contributors
6 * Released under the MIT license.
7 * http://jquery.org/license
9 * http://api.jqueryui.com/tabs/
15 (function( $, undefined ) {
20 function getNextTabId() {
24 function isLocal( anchor
) {
25 return anchor
.hash
.length
> 1 &&
26 anchor
.href
.replace( rhash
, "" ) ===
27 location
.href
.replace( rhash
, "" )
28 // support: Safari 5.1
29 // Safari 5.1 doesn't encode spaces in window.location
30 // but it does encode spaces from anchors (#8777)
31 .replace( /\s/g, "%20" );
34 $.widget( "ui.tabs", {
41 heightStyle
: "content",
54 options
= this.options
,
55 active
= options
.active
,
56 locationHash
= location
.hash
.substring( 1 );
61 .addClass( "ui-tabs ui-widget ui-widget-content ui-corner-all" )
62 .toggleClass( "ui-tabs-collapsible", options
.collapsible
)
63 // Prevent users from focusing disabled tabs via click
64 .delegate( ".ui-tabs-nav > li", "mousedown" + this.eventNamespace
, function( event
) {
65 if ( $( this ).is( ".ui-state-disabled" ) ) {
66 event
.preventDefault();
70 // Preventing the default action in mousedown doesn't prevent IE
71 // from focusing the element, so if the anchor gets focused, blur.
72 // We don't have to worry about focusing the previously focused
73 // element since clicking on a non-focusable element should focus
75 .delegate( ".ui-tabs-anchor", "focus" + this.eventNamespace
, function() {
76 if ( $( this ).closest( "li" ).is( ".ui-state-disabled" ) ) {
83 if ( active
=== null ) {
84 // check the fragment identifier in the URL
86 this.tabs
.each(function( i
, tab
) {
87 if ( $( tab
).attr( "aria-controls" ) === locationHash
) {
94 // check for a tab marked active via a class
95 if ( active
=== null ) {
96 active
= this.tabs
.index( this.tabs
.filter( ".ui-tabs-active" ) );
99 // no active tab, set to false
100 if ( active
=== null || active
=== -1 ) {
101 active
= this.tabs
.length
? 0 : false;
105 // handle numbers: negative, out of range
106 if ( active
!== false ) {
107 active
= this.tabs
.index( this.tabs
.eq( active
) );
108 if ( active
=== -1 ) {
109 active
= options
.collapsible
? false : 0;
112 options
.active
= active
;
114 // don't allow collapsible: false and active: false
115 if ( !options
.collapsible
&& options
.active
=== false && this.anchors
.length
) {
119 // Take disabling tabs via class attribute from HTML
120 // into account and update option properly.
121 if ( $.isArray( options
.disabled
) ) {
122 options
.disabled
= $.unique( options
.disabled
.concat(
123 $.map( this.tabs
.filter( ".ui-state-disabled" ), function( li
) {
124 return that
.tabs
.index( li
);
129 // check for length avoids error when initializing empty list
130 if ( this.options
.active
!== false && this.anchors
.length
) {
131 this.active
= this._findActive( this.options
.active
);
138 if ( this.active
.length
) {
139 this.load( options
.active
);
143 _getCreateEventData: function() {
146 panel
: !this.active
.length
? $() : this._getPanelForTab( this.active
)
150 _tabKeydown: function( event
) {
151 var focusedTab
= $( this.document
[0].activeElement
).closest( "li" ),
152 selectedIndex
= this.tabs
.index( focusedTab
),
155 if ( this._handlePageNav( event
) ) {
159 switch ( event
.keyCode
) {
160 case $.ui
.keyCode
.RIGHT
:
161 case $.ui
.keyCode
.DOWN
:
164 case $.ui
.keyCode
.UP
:
165 case $.ui
.keyCode
.LEFT
:
166 goingForward
= false;
169 case $.ui
.keyCode
.END
:
170 selectedIndex
= this.anchors
.length
- 1;
172 case $.ui
.keyCode
.HOME
:
175 case $.ui
.keyCode
.SPACE
:
176 // Activate only, no collapsing
177 event
.preventDefault();
178 clearTimeout( this.activating
);
179 this._activate( selectedIndex
);
181 case $.ui
.keyCode
.ENTER
:
182 // Toggle (cancel delayed activation, allow collapsing)
183 event
.preventDefault();
184 clearTimeout( this.activating
);
185 // Determine if we should collapse or activate
186 this._activate( selectedIndex
=== this.options
.active
? false : selectedIndex
);
192 // Focus the appropriate tab, based on which key was pressed
193 event
.preventDefault();
194 clearTimeout( this.activating
);
195 selectedIndex
= this._focusNextTab( selectedIndex
, goingForward
);
197 // Navigating with control key will prevent automatic activation
198 if ( !event
.ctrlKey
) {
199 // Update aria-selected immediately so that AT think the tab is already selected.
200 // Otherwise AT may confuse the user by stating that they need to activate the tab,
201 // but the tab will already be activated by the time the announcement finishes.
202 focusedTab
.attr( "aria-selected", "false" );
203 this.tabs
.eq( selectedIndex
).attr( "aria-selected", "true" );
205 this.activating
= this._delay(function() {
206 this.option( "active", selectedIndex
);
211 _panelKeydown: function( event
) {
212 if ( this._handlePageNav( event
) ) {
216 // Ctrl+up moves focus to the current tab
217 if ( event
.ctrlKey
&& event
.keyCode
=== $.ui
.keyCode
.UP
) {
218 event
.preventDefault();
223 // Alt+page up/down moves focus to the previous/next tab (and activates)
224 _handlePageNav: function( event
) {
225 if ( event
.altKey
&& event
.keyCode
=== $.ui
.keyCode
.PAGE_UP
) {
226 this._activate( this._focusNextTab( this.options
.active
- 1, false ) );
229 if ( event
.altKey
&& event
.keyCode
=== $.ui
.keyCode
.PAGE_DOWN
) {
230 this._activate( this._focusNextTab( this.options
.active
+ 1, true ) );
235 _findNextTab: function( index
, goingForward
) {
236 var lastTabIndex
= this.tabs
.length
- 1;
238 function constrain() {
239 if ( index
> lastTabIndex
) {
243 index
= lastTabIndex
;
248 while ( $.inArray( constrain(), this.options
.disabled
) !== -1 ) {
249 index
= goingForward
? index
+ 1 : index
- 1;
255 _focusNextTab: function( index
, goingForward
) {
256 index
= this._findNextTab( index
, goingForward
);
257 this.tabs
.eq( index
).focus();
261 _setOption: function( key
, value
) {
262 if ( key
=== "active" ) {
263 // _activate() will handle invalid values and update this.options
264 this._activate( value
);
268 if ( key
=== "disabled" ) {
269 // don't use the widget factory's disabled handling
270 this._setupDisabled( value
);
274 this._super( key
, value
);
276 if ( key
=== "collapsible" ) {
277 this.element
.toggleClass( "ui-tabs-collapsible", value
);
278 // Setting collapsible: false while collapsed; open first panel
279 if ( !value
&& this.options
.active
=== false ) {
284 if ( key
=== "event" ) {
285 this._setupEvents( value
);
288 if ( key
=== "heightStyle" ) {
289 this._setupHeightStyle( value
);
293 _tabId: function( tab
) {
294 return tab
.attr( "aria-controls" ) || "ui-tabs-" + getNextTabId();
297 _sanitizeSelector: function( hash
) {
298 return hash
? hash
.replace( /[!"$%&'()*+,.\/:;<=>?@\[\]\^`{|}~]/g, "\\$&" ) : "";
301 refresh: function() {
302 var options
= this.options
,
303 lis
= this.tablist
.children( ":has(a[href])" );
305 // get disabled tabs from class attribute from HTML
306 // this will get converted to a boolean if needed in _refresh()
307 options
.disabled
= $.map( lis
.filter( ".ui-state-disabled" ), function( tab
) {
308 return lis
.index( tab
);
313 // was collapsed or no tabs
314 if ( options
.active
=== false || !this.anchors
.length
) {
315 options
.active
= false;
317 // was active, but active tab is gone
318 } else if ( this.active
.length
&& !$.contains( this.tablist
[ 0 ], this.active
[ 0 ] ) ) {
319 // all remaining tabs are disabled
320 if ( this.tabs
.length
=== options
.disabled
.length
) {
321 options
.active
= false;
323 // activate previous tab
325 this._activate( this._findNextTab( Math
.max( 0, options
.active
- 1 ), false ) );
327 // was active, active tab still exists
329 // make sure active index is correct
330 options
.active
= this.tabs
.index( this.active
);
336 _refresh: function() {
337 this._setupDisabled( this.options
.disabled
);
338 this._setupEvents( this.options
.event
);
339 this._setupHeightStyle( this.options
.heightStyle
);
341 this.tabs
.not( this.active
).attr({
342 "aria-selected": "false",
345 this.panels
.not( this._getPanelForTab( this.active
) )
348 "aria-expanded": "false",
349 "aria-hidden": "true"
352 // Make sure one tab is in the tab order
353 if ( !this.active
.length
) {
354 this.tabs
.eq( 0 ).attr( "tabIndex", 0 );
357 .addClass( "ui-tabs-active ui-state-active" )
359 "aria-selected": "true",
362 this._getPanelForTab( this.active
)
365 "aria-expanded": "true",
366 "aria-hidden": "false"
371 _processTabs: function() {
374 this.tablist
= this._getList()
375 .addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" )
376 .attr( "role", "tablist" );
378 this.tabs
= this.tablist
.find( "> li:has(a[href])" )
379 .addClass( "ui-state-default ui-corner-top" )
385 this.anchors
= this.tabs
.map(function() {
386 return $( "a", this )[ 0 ];
388 .addClass( "ui-tabs-anchor" )
390 role
: "presentation",
396 this.anchors
.each(function( i
, anchor
) {
397 var selector
, panel
, panelId
,
398 anchorId
= $( anchor
).uniqueId().attr( "id" ),
399 tab
= $( anchor
).closest( "li" ),
400 originalAriaControls
= tab
.attr( "aria-controls" );
403 if ( isLocal( anchor
) ) {
404 selector
= anchor
.hash
;
405 panel
= that
.element
.find( that
._sanitizeSelector( selector
) );
408 panelId
= that
._tabId( tab
);
409 selector
= "#" + panelId
;
410 panel
= that
.element
.find( selector
);
411 if ( !panel
.length
) {
412 panel
= that
._createPanel( panelId
);
413 panel
.insertAfter( that
.panels
[ i
- 1 ] || that
.tablist
);
415 panel
.attr( "aria-live", "polite" );
419 that
.panels
= that
.panels
.add( panel
);
421 if ( originalAriaControls
) {
422 tab
.data( "ui-tabs-aria-controls", originalAriaControls
);
425 "aria-controls": selector
.substring( 1 ),
426 "aria-labelledby": anchorId
428 panel
.attr( "aria-labelledby", anchorId
);
432 .addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" )
433 .attr( "role", "tabpanel" );
436 // allow overriding how to find the list for rare usage scenarios (#7715)
437 _getList: function() {
438 return this.element
.find( "ol,ul" ).eq( 0 );
441 _createPanel: function( id
) {
444 .addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" )
445 .data( "ui-tabs-destroy", true );
448 _setupDisabled: function( disabled
) {
449 if ( $.isArray( disabled
) ) {
450 if ( !disabled
.length
) {
452 } else if ( disabled
.length
=== this.anchors
.length
) {
458 for ( var i
= 0, li
; ( li
= this.tabs
[ i
] ); i
++ ) {
459 if ( disabled
=== true || $.inArray( i
, disabled
) !== -1 ) {
461 .addClass( "ui-state-disabled" )
462 .attr( "aria-disabled", "true" );
465 .removeClass( "ui-state-disabled" )
466 .removeAttr( "aria-disabled" );
470 this.options
.disabled
= disabled
;
473 _setupEvents: function( event
) {
475 click: function( event
) {
476 event
.preventDefault();
480 $.each( event
.split(" "), function( index
, eventName
) {
481 events
[ eventName
] = "_eventHandler";
485 this._off( this.anchors
.add( this.tabs
).add( this.panels
) );
486 this._on( this.anchors
, events
);
487 this._on( this.tabs
, { keydown
: "_tabKeydown" } );
488 this._on( this.panels
, { keydown
: "_panelKeydown" } );
490 this._focusable( this.tabs
);
491 this._hoverable( this.tabs
);
494 _setupHeightStyle: function( heightStyle
) {
495 var maxHeight
, overflow
,
496 parent
= this.element
.parent();
498 if ( heightStyle
=== "fill" ) {
499 // IE 6 treats height like minHeight, so we need to turn off overflow
500 // in order to get a reliable height
501 // we use the minHeight support test because we assume that only
502 // browsers that don't support minHeight will treat height as minHeight
503 if ( !$.support
.minHeight
) {
504 overflow
= parent
.css( "overflow" );
505 parent
.css( "overflow", "hidden");
507 maxHeight
= parent
.height();
508 this.element
.siblings( ":visible" ).each(function() {
509 var elem
= $( this ),
510 position
= elem
.css( "position" );
512 if ( position
=== "absolute" || position
=== "fixed" ) {
515 maxHeight
-= elem
.outerHeight( true );
518 parent
.css( "overflow", overflow
);
521 this.element
.children().not( this.panels
).each(function() {
522 maxHeight
-= $( this ).outerHeight( true );
525 this.panels
.each(function() {
526 $( this ).height( Math
.max( 0, maxHeight
-
527 $( this ).innerHeight() + $( this ).height() ) );
529 .css( "overflow", "auto" );
530 } else if ( heightStyle
=== "auto" ) {
532 this.panels
.each(function() {
533 maxHeight
= Math
.max( maxHeight
, $( this ).height( "" ).height() );
534 }).height( maxHeight
);
538 _eventHandler: function( event
) {
539 var options
= this.options
,
540 active
= this.active
,
541 anchor
= $( event
.currentTarget
),
542 tab
= anchor
.closest( "li" ),
543 clickedIsActive
= tab
[ 0 ] === active
[ 0 ],
544 collapsing
= clickedIsActive
&& options
.collapsible
,
545 toShow
= collapsing
? $() : this._getPanelForTab( tab
),
546 toHide
= !active
.length
? $() : this._getPanelForTab( active
),
550 newTab
: collapsing
? $() : tab
,
554 event
.preventDefault();
556 if ( tab
.hasClass( "ui-state-disabled" ) ||
557 // tab is already loading
558 tab
.hasClass( "ui-tabs-loading" ) ||
559 // can't switch durning an animation
561 // click on active header, but not collapsible
562 ( clickedIsActive
&& !options
.collapsible
) ||
563 // allow canceling activation
564 ( this._trigger( "beforeActivate", event
, eventData
) === false ) ) {
568 options
.active
= collapsing
? false : this.tabs
.index( tab
);
570 this.active
= clickedIsActive
? $() : tab
;
575 if ( !toHide
.length
&& !toShow
.length
) {
576 $.error( "jQuery UI Tabs: Mismatching fragment identifier." );
579 if ( toShow
.length
) {
580 this.load( this.tabs
.index( tab
), event
);
582 this._toggle( event
, eventData
);
585 // handles show/hide for selecting tabs
586 _toggle: function( event
, eventData
) {
588 toShow
= eventData
.newPanel
,
589 toHide
= eventData
.oldPanel
;
593 function complete() {
594 that
.running
= false;
595 that
._trigger( "activate", event
, eventData
);
599 eventData
.newTab
.closest( "li" ).addClass( "ui-tabs-active ui-state-active" );
601 if ( toShow
.length
&& that
.options
.show
) {
602 that
._show( toShow
, that
.options
.show
, complete
);
609 // start out by hiding, then showing, then completing
610 if ( toHide
.length
&& this.options
.hide
) {
611 this._hide( toHide
, this.options
.hide
, function() {
612 eventData
.oldTab
.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" );
616 eventData
.oldTab
.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" );
622 "aria-expanded": "false",
623 "aria-hidden": "true"
625 eventData
.oldTab
.attr( "aria-selected", "false" );
626 // If we're switching tabs, remove the old tab from the tab order.
627 // If we're opening from collapsed state, remove the previous tab from the tab order.
628 // If we're collapsing, then keep the collapsing tab in the tab order.
629 if ( toShow
.length
&& toHide
.length
) {
630 eventData
.oldTab
.attr( "tabIndex", -1 );
631 } else if ( toShow
.length
) {
632 this.tabs
.filter(function() {
633 return $( this ).attr( "tabIndex" ) === 0;
635 .attr( "tabIndex", -1 );
639 "aria-expanded": "true",
640 "aria-hidden": "false"
642 eventData
.newTab
.attr({
643 "aria-selected": "true",
648 _activate: function( index
) {
650 active
= this._findActive( index
);
652 // trying to activate the already active panel
653 if ( active
[ 0 ] === this.active
[ 0 ] ) {
657 // trying to collapse, simulate a click on the current active header
658 if ( !active
.length
) {
659 active
= this.active
;
662 anchor
= active
.find( ".ui-tabs-anchor" )[ 0 ];
665 currentTarget
: anchor
,
666 preventDefault
: $.noop
670 _findActive: function( index
) {
671 return index
=== false ? $() : this.tabs
.eq( index
);
674 _getIndex: function( index
) {
675 // meta-function to give users option to provide a href string instead of a numerical index.
676 if ( typeof index
=== "string" ) {
677 index
= this.anchors
.index( this.anchors
.filter( "[href$='" + index
+ "']" ) );
683 _destroy: function() {
688 this.element
.removeClass( "ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible" );
691 .removeClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" )
692 .removeAttr( "role" );
695 .removeClass( "ui-tabs-anchor" )
696 .removeAttr( "role" )
697 .removeAttr( "tabIndex" )
698 .removeData( "href.tabs" )
699 .removeData( "load.tabs" )
702 this.tabs
.add( this.panels
).each(function() {
703 if ( $.data( this, "ui-tabs-destroy" ) ) {
707 .removeClass( "ui-state-default ui-state-active ui-state-disabled " +
708 "ui-corner-top ui-corner-bottom ui-widget-content ui-tabs-active ui-tabs-panel" )
709 .removeAttr( "tabIndex" )
710 .removeAttr( "aria-live" )
711 .removeAttr( "aria-busy" )
712 .removeAttr( "aria-selected" )
713 .removeAttr( "aria-labelledby" )
714 .removeAttr( "aria-hidden" )
715 .removeAttr( "aria-expanded" )
716 .removeAttr( "role" );
720 this.tabs
.each(function() {
722 prev
= li
.data( "ui-tabs-aria-controls" );
724 li
.attr( "aria-controls", prev
);
726 li
.removeAttr( "aria-controls" );
732 if ( this.options
.heightStyle
!== "content" ) {
733 this.panels
.css( "height", "" );
737 enable: function( index
) {
738 var disabled
= this.options
.disabled
;
739 if ( disabled
=== false ) {
743 if ( index
=== undefined ) {
746 index
= this._getIndex( index
);
747 if ( $.isArray( disabled
) ) {
748 disabled
= $.map( disabled
, function( num
) {
749 return num
!== index
? num
: null;
752 disabled
= $.map( this.tabs
, function( li
, num
) {
753 return num
!== index
? num
: null;
757 this._setupDisabled( disabled
);
760 disable: function( index
) {
761 var disabled
= this.options
.disabled
;
762 if ( disabled
=== true ) {
766 if ( index
=== undefined ) {
769 index
= this._getIndex( index
);
770 if ( $.inArray( index
, disabled
) !== -1 ) {
773 if ( $.isArray( disabled
) ) {
774 disabled
= $.merge( [ index
], disabled
).sort();
776 disabled
= [ index
];
779 this._setupDisabled( disabled
);
782 load: function( index
, event
) {
783 index
= this._getIndex( index
);
785 tab
= this.tabs
.eq( index
),
786 anchor
= tab
.find( ".ui-tabs-anchor" ),
787 panel
= this._getPanelForTab( tab
),
794 if ( isLocal( anchor
[ 0 ] ) ) {
798 this.xhr
= $.ajax( this._ajaxSettings( anchor
, event
, eventData
) );
800 // support: jQuery <1.8
801 // jQuery <1.8 returns false if the request is canceled in beforeSend,
802 // but as of 1.8, $.ajax() always returns a jqXHR object.
803 if ( this.xhr
&& this.xhr
.statusText
!== "canceled" ) {
804 tab
.addClass( "ui-tabs-loading" );
805 panel
.attr( "aria-busy", "true" );
808 .success(function( response
) {
809 // support: jQuery <1.8
810 // http://bugs.jquery.com/ticket/11778
811 setTimeout(function() {
812 panel
.html( response
);
813 that
._trigger( "load", event
, eventData
);
816 .complete(function( jqXHR
, status
) {
817 // support: jQuery <1.8
818 // http://bugs.jquery.com/ticket/11778
819 setTimeout(function() {
820 if ( status
=== "abort" ) {
821 that
.panels
.stop( false, true );
824 tab
.removeClass( "ui-tabs-loading" );
825 panel
.removeAttr( "aria-busy" );
827 if ( jqXHR
=== that
.xhr
) {
835 // TODO: Remove this function in 1.10 when ajaxOptions is removed
836 _ajaxSettings: function( anchor
, event
, eventData
) {
839 url
: anchor
.attr( "href" ),
840 beforeSend: function( jqXHR
, settings
) {
841 return that
._trigger( "beforeLoad", event
,
842 $.extend( { jqXHR
: jqXHR
, ajaxSettings
: settings
}, eventData
) );
847 _getPanelForTab: function( tab
) {
848 var id
= $( tab
).attr( "aria-controls" );
849 return this.element
.find( this._sanitizeSelector( "#" + id
) );
854 if ( $.uiBackCompat
!== false ) {
856 // helper method for a lot of the back compat extensions
857 $.ui
.tabs
.prototype._ui = function( tab
, panel
) {
861 index
: this.anchors
.index( tab
)
866 $.widget( "ui.tabs", $.ui
.tabs
, {
867 url: function( index
, url
) {
868 this.anchors
.eq( index
).attr( "href", url
);
872 // TODO: Remove _ajaxSettings() method when removing this extension
873 // ajaxOptions and cache options
874 $.widget( "ui.tabs", $.ui
.tabs
, {
880 _create: function() {
885 this._on({ tabsbeforeload: function( event
, ui
) {
886 // tab is already cached
887 if ( $.data( ui
.tab
[ 0 ], "cache.tabs" ) ) {
888 event
.preventDefault();
892 ui
.jqXHR
.success(function() {
893 if ( that
.options
.cache
) {
894 $.data( ui
.tab
[ 0 ], "cache.tabs", true );
900 _ajaxSettings: function( anchor
, event
, ui
) {
901 var ajaxOptions
= this.options
.ajaxOptions
;
902 return $.extend( {}, ajaxOptions
, {
903 error: function( xhr
, status
) {
905 // Passing index avoid a race condition when this method is
906 // called after the user has selected another tab.
907 // Pass the anchor that initiated this request allows
908 // loadError to manipulate the tab content panel via $(a.hash)
910 xhr
, status
, ui
.tab
.closest( "li" ).index(), ui
.tab
[ 0 ] );
914 }, this._superApply( arguments
) );
917 _setOption: function( key
, value
) {
918 // reset cache if switching from cached to not cached
919 if ( key
=== "cache" && value
=== false ) {
920 this.anchors
.removeData( "cache.tabs" );
922 this._super( key
, value
);
925 _destroy: function() {
926 this.anchors
.removeData( "cache.tabs" );
930 url: function( index
){
931 this.anchors
.eq( index
).removeData( "cache.tabs" );
932 this._superApply( arguments
);
937 $.widget( "ui.tabs", $.ui
.tabs
, {
946 $.widget( "ui.tabs", $.ui
.tabs
, {
948 spinner
: "<em>Loading…</em>"
950 _create: function() {
953 tabsbeforeload: function( event
, ui
) {
954 // Don't react to nested tabs or tabs that don't use a spinner
955 if ( event
.target
!== this.element
[ 0 ] ||
956 !this.options
.spinner
) {
960 var span
= ui
.tab
.find( "span" ),
962 span
.html( this.options
.spinner
);
963 ui
.jqXHR
.complete(function() {
971 // enable/disable events
972 $.widget( "ui.tabs", $.ui
.tabs
, {
978 enable: function( index
) {
979 var options
= this.options
,
982 if ( index
&& options
.disabled
=== true ||
983 ( $.isArray( options
.disabled
) && $.inArray( index
, options
.disabled
) !== -1 ) ) {
987 this._superApply( arguments
);
990 this._trigger( "enable", null, this._ui( this.anchors
[ index
], this.panels
[ index
] ) );
994 disable: function( index
) {
995 var options
= this.options
,
998 if ( index
&& options
.disabled
=== false ||
999 ( $.isArray( options
.disabled
) && $.inArray( index
, options
.disabled
) === -1 ) ) {
1003 this._superApply( arguments
);
1006 this._trigger( "disable", null, this._ui( this.anchors
[ index
], this.panels
[ index
] ) );
1011 // add/remove methods and events
1012 $.widget( "ui.tabs", $.ui
.tabs
, {
1016 tabTemplate
: "<li><a href='#{href}'><span>#{label}</span></a></li>"
1019 add: function( url
, label
, index
) {
1020 if ( index
=== undefined ) {
1021 index
= this.anchors
.length
;
1024 var doInsertAfter
, panel
,
1025 options
= this.options
,
1026 li
= $( options
.tabTemplate
1027 .replace( /#\{href\}/g, url
)
1028 .replace( /#\{label\}/g, label
) ),
1029 id
= !url
.indexOf( "#" ) ?
1030 url
.replace( "#", "" ) :
1033 li
.addClass( "ui-state-default ui-corner-top" ).data( "ui-tabs-destroy", true );
1034 li
.attr( "aria-controls", id
);
1036 doInsertAfter
= index
>= this.tabs
.length
;
1038 // try to find an existing element before creating a new one
1039 panel
= this.element
.find( "#" + id
);
1040 if ( !panel
.length
) {
1041 panel
= this._createPanel( id
);
1042 if ( doInsertAfter
) {
1044 panel
.insertAfter( this.panels
.eq( -1 ) );
1046 panel
.appendTo( this.element
);
1049 panel
.insertBefore( this.panels
[ index
] );
1052 panel
.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ).hide();
1054 if ( doInsertAfter
) {
1055 li
.appendTo( this.tablist
);
1057 li
.insertBefore( this.tabs
[ index
] );
1060 options
.disabled
= $.map( options
.disabled
, function( n
) {
1061 return n
>= index
? ++n
: n
;
1065 if ( this.tabs
.length
=== 1 && options
.active
=== false ) {
1066 this.option( "active", 0 );
1069 this._trigger( "add", null, this._ui( this.anchors
[ index
], this.panels
[ index
] ) );
1073 remove: function( index
) {
1074 index
= this._getIndex( index
);
1075 var options
= this.options
,
1076 tab
= this.tabs
.eq( index
).remove(),
1077 panel
= this._getPanelForTab( tab
).remove();
1079 // If selected tab was removed focus tab to the right or
1080 // in case the last tab was removed the tab to the left.
1081 // We check for more than 2 tabs, because if there are only 2,
1082 // then when we remove this tab, there will only be one tab left
1083 // so we don't need to detect which tab to activate.
1084 if ( tab
.hasClass( "ui-tabs-active" ) && this.anchors
.length
> 2 ) {
1085 this._activate( index
+ ( index
+ 1 < this.anchors
.length
? 1 : -1 ) );
1088 options
.disabled
= $.map(
1089 $.grep( options
.disabled
, function( n
) {
1093 return n
>= index
? --n
: n
;
1098 this._trigger( "remove", null, this._ui( tab
.find( "a" )[ 0 ], panel
[ 0 ] ) );
1104 $.widget( "ui.tabs", $.ui
.tabs
, {
1105 length: function() {
1106 return this.anchors
.length
;
1110 // panel ids (idPrefix option + title attribute)
1111 $.widget( "ui.tabs", $.ui
.tabs
, {
1113 idPrefix
: "ui-tabs-"
1116 _tabId: function( tab
) {
1117 var a
= tab
.is( "li" ) ? tab
.find( "a[href]" ) : tab
;
1119 return $( a
).closest( "li" ).attr( "aria-controls" ) ||
1120 a
.title
&& a
.title
.replace( /\s/g, "_" ).replace( /[^\w\u00c0-\uFFFF\-]/g, "" ) ||
1121 this.options
.idPrefix
+ getNextTabId();
1125 // _createPanel method
1126 $.widget( "ui.tabs", $.ui
.tabs
, {
1128 panelTemplate
: "<div></div>"
1131 _createPanel: function( id
) {
1132 return $( this.options
.panelTemplate
)
1134 .addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" )
1135 .data( "ui-tabs-destroy", true );
1140 $.widget( "ui.tabs", $.ui
.tabs
, {
1141 _create: function() {
1142 var options
= this.options
;
1143 if ( options
.active
=== null && options
.selected
!== undefined ) {
1144 options
.active
= options
.selected
=== -1 ? false : options
.selected
;
1147 options
.selected
= options
.active
;
1148 if ( options
.selected
=== false ) {
1149 options
.selected
= -1;
1153 _setOption: function( key
, value
) {
1154 if ( key
!== "selected" ) {
1155 return this._super( key
, value
);
1158 var options
= this.options
;
1159 this._super( "active", value
=== -1 ? false : value
);
1160 options
.selected
= options
.active
;
1161 if ( options
.selected
=== false ) {
1162 options
.selected
= -1;
1166 _eventHandler: function() {
1167 this._superApply( arguments
);
1168 this.options
.selected
= this.options
.active
;
1169 if ( this.options
.selected
=== false ) {
1170 this.options
.selected
= -1;
1175 // show and select event
1176 $.widget( "ui.tabs", $.ui
.tabs
, {
1181 _create: function() {
1183 if ( this.options
.active
!== false ) {
1184 this._trigger( "show", null, this._ui(
1185 this.active
.find( ".ui-tabs-anchor" )[ 0 ],
1186 this._getPanelForTab( this.active
)[ 0 ] ) );
1189 _trigger: function( type
, event
, data
) {
1191 ret
= this._superApply( arguments
);
1197 if ( type
=== "beforeActivate" ) {
1198 tab
= data
.newTab
.length
? data
.newTab
: data
.oldTab
;
1199 panel
= data
.newPanel
.length
? data
.newPanel
: data
.oldPanel
;
1200 ret
= this._super( "select", event
, {
1201 tab
: tab
.find( ".ui-tabs-anchor" )[ 0],
1203 index
: tab
.closest( "li" ).index()
1205 } else if ( type
=== "activate" && data
.newTab
.length
) {
1206 ret
= this._super( "show", event
, {
1207 tab
: data
.newTab
.find( ".ui-tabs-anchor" )[ 0 ],
1208 panel
: data
.newPanel
[ 0 ],
1209 index
: data
.newTab
.closest( "li" ).index()
1217 $.widget( "ui.tabs", $.ui
.tabs
, {
1218 select: function( index
) {
1219 index
= this._getIndex( index
);
1220 if ( index
=== -1 ) {
1221 if ( this.options
.collapsible
&& this.options
.selected
!== -1 ) {
1222 index
= this.options
.selected
;
1227 this.anchors
.eq( index
).trigger( this.options
.event
+ this.eventNamespace
);
1236 $.widget( "ui.tabs", $.ui
.tabs
, {
1238 cookie
: null // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true }
1240 _create: function() {
1241 var options
= this.options
,
1243 if ( options
.active
== null && options
.cookie
) {
1244 active
= parseInt( this._cookie(), 10 );
1245 if ( active
=== -1 ) {
1248 options
.active
= active
;
1252 _cookie: function( active
) {
1253 var cookie
= [ this.cookie
||
1254 ( this.cookie
= this.options
.cookie
.name
|| "ui-tabs-" + (++listId
) ) ];
1255 if ( arguments
.length
) {
1256 cookie
.push( active
=== false ? -1 : active
);
1257 cookie
.push( this.options
.cookie
);
1259 return $.cookie
.apply( null, cookie
);
1261 _refresh: function() {
1263 if ( this.options
.cookie
) {
1264 this._cookie( this.options
.active
, this.options
.cookie
);
1267 _eventHandler: function() {
1268 this._superApply( arguments
);
1269 if ( this.options
.cookie
) {
1270 this._cookie( this.options
.active
, this.options
.cookie
);
1273 _destroy: function() {
1275 if ( this.options
.cookie
) {
1276 this._cookie( null, this.options
.cookie
);
1284 $.widget( "ui.tabs", $.ui
.tabs
, {
1285 _trigger: function( type
, event
, data
) {
1286 var _data
= $.extend( {}, data
);
1287 if ( type
=== "load" ) {
1288 _data
.panel
= _data
.panel
[ 0 ];
1289 _data
.tab
= _data
.tab
.find( ".ui-tabs-anchor" )[ 0 ];
1291 return this._super( type
, event
, _data
);
1296 // The new animation options (show, hide) conflict with the old show callback.
1297 // The old fx option wins over show/hide anyway (always favor back-compat).
1298 // If a user wants to use the new animation API, they must give up the old API.
1299 $.widget( "ui.tabs", $.ui
.tabs
, {
1301 fx
: null // e.g. { height: "toggle", opacity: "toggle", duration: 200 }
1304 _getFx: function() {
1306 fx
= this.options
.fx
;
1309 if ( $.isArray( fx
) ) {
1317 return fx
? { show
: show
, hide
: hide
} : null;
1320 _toggle: function( event
, eventData
) {
1322 toShow
= eventData
.newPanel
,
1323 toHide
= eventData
.oldPanel
,
1327 return this._super( event
, eventData
);
1330 that
.running
= true;
1332 function complete() {
1333 that
.running
= false;
1334 that
._trigger( "activate", event
, eventData
);
1338 eventData
.newTab
.closest( "li" ).addClass( "ui-tabs-active ui-state-active" );
1340 if ( toShow
.length
&& fx
.show
) {
1342 .animate( fx
.show
, fx
.show
.duration
, function() {
1351 // start out by hiding, then showing, then completing
1352 if ( toHide
.length
&& fx
.hide
) {
1353 toHide
.animate( fx
.hide
, fx
.hide
.duration
, function() {
1354 eventData
.oldTab
.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" );
1358 eventData
.oldTab
.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" );