Tabs: Split out event handler, showtab, hidetab, resetStyle to their own methods

This commit is contained in:
David Petersen 2011-03-26 12:04:14 -04:00
parent 6fc98deef0
commit 03ef2fb452

95
ui/jquery.ui.tabs.js vendored
View File

@ -258,61 +258,72 @@ $.widget( "ui.tabs", {
this._hoverable( this.lis ); this._hoverable( this.lis );
// set up animations // set up animations
var hideFx, showFx;
if ( o.fx ) { if ( o.fx ) {
if ( $.isArray( o.fx ) ) { if ( $.isArray( o.fx ) ) {
hideFx = o.fx[ 0 ]; this.hideFx = o.fx[ 0 ];
showFx = o.fx[ 1 ]; this.showFx = o.fx[ 1 ];
} else { } else {
hideFx = showFx = o.fx; this.hideFx = this.showFx = o.fx;
} }
} }
// attach tab event handler, unbind to avoid duplicates from former tabifying...
this.anchors.bind( o.event + ".tabs", $.proxy( this, "_eventHandler" ));
// disable click in any case
this.anchors.bind( "click.tabs", function( event ){
event.preventDefault();
});
},
// Reset certain styles left over from animation // Reset certain styles left over from animation
// and prevent IE's ClearType bug... // and prevent IE's ClearType bug...
function resetStyle( $el, fx ) { _resetStyle: function ( $el, fx ) {
$el.css( "display", "" ); $el.css( "display", "" );
if ( !$.support.opacity && fx.opacity ) { if ( !$.support.opacity && fx.opacity ) {
$el[ 0 ].style.removeAttribute( "filter" ); $el[ 0 ].style.removeAttribute( "filter" );
} }
} },
_showTab: function( clicked, show, event ) {
var self = this;
// Show a tab...
var showTab = showFx
? function( clicked, $show, event ) {
$( clicked ).closest( "li" ).addClass( "ui-tabs-selected ui-state-active" ); $( clicked ).closest( "li" ).addClass( "ui-tabs-selected ui-state-active" );
$show.hide().removeClass( "ui-tabs-hide" ) // avoid flicker that way
if ( this.showFx ) {
show.hide().removeClass( "ui-tabs-hide" ) // avoid flicker that way
.animate( showFx, showFx.duration || "normal", function() { .animate( showFx, showFx.duration || "normal", function() {
resetStyle( $show, showFx ); self._resetStyle( show, showFx );
self._trigger( "show", event, self._ui( clicked, $show[ 0 ] ) ); self._trigger( "show", event, self._ui( clicked, show[ 0 ] ) );
}); });
} else {
show.removeClass( "ui-tabs-hide" );
self._trigger( "show", event, self._ui( clicked, show[ 0 ] ) );
} }
: function( clicked, $show, event ) { },
$( clicked ).closest( "li" ).addClass( "ui-tabs-selected ui-state-active" );
$show.removeClass( "ui-tabs-hide" );
self._trigger( "show", event, self._ui( clicked, $show[ 0 ] ) );
};
// Hide a tab, $show is optional... _hideTab: function( clicked, $hide ) {
var hideTab = hideFx var self = this;
? function( clicked, $hide ) {
if ( this.hideFx ) {
$hide.animate( hideFx, hideFx.duration || "normal", function() { $hide.animate( hideFx, hideFx.duration || "normal", function() {
self.lis.removeClass( "ui-tabs-selected ui-state-active" ); self.lis.removeClass( "ui-tabs-selected ui-state-active" );
$hide.addClass( "ui-tabs-hide" ); $hide.addClass( "ui-tabs-hide" );
resetStyle( $hide, hideFx ); self._resetStyle( $hide, hideFx );
self.element.dequeue( "tabs" ); self.element.dequeue( "tabs" );
}); });
} } else {
: function( clicked, $hide, $show ) {
self.lis.removeClass( "ui-tabs-selected ui-state-active" ); self.lis.removeClass( "ui-tabs-selected ui-state-active" );
$hide.addClass( "ui-tabs-hide" ); $hide.addClass( "ui-tabs-hide" );
self.element.dequeue( "tabs" ); self.element.dequeue( "tabs" );
}; }
},
// attach tab event handler, unbind to avoid duplicates from former tabifying... _eventHandler: function( event ) {
this.anchors.bind( o.event + ".tabs", function( event ) {
event.preventDefault(); event.preventDefault();
var el = this, var self = this,
o = this.options,
el = event.currentTarget,
$li = $(el).closest( "li" ), $li = $(el).closest( "li" ),
$hide = self.panels.filter( ":not(.ui-tabs-hide)" ), $hide = self.panels.filter( ":not(.ui-tabs-hide)" ),
$show = self.element.find( self._sanitizeSelector( el.hash ) ); $show = self.element.find( self._sanitizeSelector( el.hash ) );
@ -325,12 +336,12 @@ $.widget( "ui.tabs", {
$li.hasClass( "ui-state-disabled" ) || $li.hasClass( "ui-state-disabled" ) ||
$li.hasClass( "ui-state-processing" ) || $li.hasClass( "ui-state-processing" ) ||
self.panels.filter( ":animated" ).length || self.panels.filter( ":animated" ).length ||
self._trigger( "select", event, self._ui( this, $show[ 0 ] ) ) === false ) { self._trigger( "select", event, self._ui( el, $show[ 0 ] ) ) === false ) {
this.blur(); el.blur();
return; return;
} }
o.selected = self.anchors.index( this ); o.selected = self.anchors.index( el );
self.abort(); self.abort();
@ -344,10 +355,10 @@ $.widget( "ui.tabs", {
} }
self.element.queue( "tabs", function() { self.element.queue( "tabs", function() {
hideTab( el, $hide ); self._hideTab( el, $hide );
}).dequeue( "tabs" ); }).dequeue( "tabs" );
this.blur(); el.blur();
return; return;
} else if ( !$hide.length ) { } else if ( !$hide.length ) {
if ( o.cookie ) { if ( o.cookie ) {
@ -355,13 +366,13 @@ $.widget( "ui.tabs", {
} }
self.element.queue( "tabs", function() { self.element.queue( "tabs", function() {
showTab( el, $show, event ); self._showTab( el, $show, event );
}); });
// TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171 // TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171
self.load( self.anchors.index( this ) ); self.load( self.anchors.index( el ) );
this.blur(); el.blur();
return; return;
} }
} }
@ -374,14 +385,14 @@ $.widget( "ui.tabs", {
if ( $show.length ) { if ( $show.length ) {
if ( $hide.length ) { if ( $hide.length ) {
self.element.queue( "tabs", function() { self.element.queue( "tabs", function() {
hideTab( el, $hide ); self._hideTab( el, $hide );
}); });
} }
self.element.queue( "tabs", function() { self.element.queue( "tabs", function() {
showTab( el, $show, event ); self._showTab( el, $show, event );
}); });
self.load( self.anchors.index( this ) ); self.load( self.anchors.index( el ) );
} else { } else {
throw "jQuery UI Tabs: Mismatching fragment identifier."; throw "jQuery UI Tabs: Mismatching fragment identifier.";
} }
@ -391,14 +402,8 @@ $.widget( "ui.tabs", {
// in modern browsers; blur() removes focus from address bar in Firefox // in modern browsers; blur() removes focus from address bar in Firefox
// which can become a usability // which can become a usability
if ( $.browser.msie ) { if ( $.browser.msie ) {
this.blur(); el.blur();
} }
});
// disable click in any case
this.anchors.bind( "click.tabs", function( event ){
event.preventDefault();
});
}, },
_getIndex: function( index ) { _getIndex: function( index ) {