mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Tabs: Split out event handler, showtab, hidetab, resetStyle to their own methods
This commit is contained in:
parent
6fc98deef0
commit
03ef2fb452
95
ui/jquery.ui.tabs.js
vendored
95
ui/jquery.ui.tabs.js
vendored
@ -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 ) {
|
||||||
|
Loading…
Reference in New Issue
Block a user