Skip to content

Commit 03ef2fb

Browse files
petersendiditpetersendidit
committed
Tabs: Split out event handler, showtab, hidetab, resetStyle to their own methods
1 parent 6fc98de commit 03ef2fb

File tree

1 file changed

+116
-111
lines changed

1 file changed

+116
-111
lines changed

‎ui/jquery.ui.tabs.js

Lines changed: 116 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -258,147 +258,152 @@ $.widget( "ui.tabs", {
258258
this._hoverable( this.lis );
259259

260260
// set up animations
261-
var hideFx, showFx;
262261
if ( o.fx ) {
263262
if ( $.isArray( o.fx ) ) {
264-
hideFx = o.fx[ 0 ];
265-
showFx = o.fx[ 1 ];
263+
this.hideFx = o.fx[ 0 ];
264+
this.showFx = o.fx[ 1 ];
266265
} else {
267-
hideFx = showFx = o.fx;
266+
this.hideFx = this.showFx = o.fx;
268267
}
269268
}
270269

271-
// Reset certain styles left over from animation
272-
// and prevent IE's ClearType bug...
273-
function resetStyle( $el, fx ) {
274-
$el.css( "display", "" );
275-
if ( !$.support.opacity && fx.opacity ) {
276-
$el[ 0 ].style.removeAttribute( "filter" );
277-
}
270+
// attach tab event handler, unbind to avoid duplicates from former tabifying...
271+
this.anchors.bind( o.event + ".tabs", $.proxy( this, "_eventHandler" ));
272+
273+
// disable click in any case
274+
this.anchors.bind( "click.tabs", function( event ){
275+
event.preventDefault();
276+
});
277+
},
278+
279+
// Reset certain styles left over from animation
280+
// and prevent IE's ClearType bug...
281+
_resetStyle: function ( $el, fx ) {
282+
$el.css( "display", "" );
283+
if ( !$.support.opacity && fx.opacity ) {
284+
$el[ 0 ].style.removeAttribute( "filter" );
278285
}
286+
},
279287

280-
// Show a tab...
281-
var showTab = showFx
282-
? function( clicked, $show, event ) {
283-
$( clicked ).closest( "li" ).addClass( "ui-tabs-selected ui-state-active" );
284-
$show.hide().removeClass( "ui-tabs-hide" ) // avoid flicker that way
285-
.animate( showFx, showFx.duration || "normal", function() {
286-
resetStyle( $show, showFx );
287-
self._trigger( "show", event, self._ui( clicked, $show[ 0 ] ) );
288-
});
289-
}
290-
: function( clicked, $show, event ) {
291-
$( clicked ).closest( "li" ).addClass( "ui-tabs-selected ui-state-active" );
292-
$show.removeClass( "ui-tabs-hide" );
293-
self._trigger( "show", event, self._ui( clicked, $show[ 0 ] ) );
294-
};
295-
296-
// Hide a tab, $show is optional...
297-
var hideTab = hideFx
298-
? function( clicked, $hide ) {
299-
$hide.animate( hideFx, hideFx.duration || "normal", function() {
300-
self.lis.removeClass( "ui-tabs-selected ui-state-active" );
301-
$hide.addClass( "ui-tabs-hide" );
302-
resetStyle( $hide, hideFx );
303-
self.element.dequeue( "tabs" );
288+
_showTab: function( clicked, show, event ) {
289+
var self = this;
290+
291+
$( clicked ).closest( "li" ).addClass( "ui-tabs-selected ui-state-active" );
292+
293+
if ( this.showFx ) {
294+
show.hide().removeClass( "ui-tabs-hide" ) // avoid flicker that way
295+
.animate( showFx, showFx.duration || "normal", function() {
296+
self._resetStyle( show, showFx );
297+
self._trigger( "show", event, self._ui( clicked, show[ 0 ] ) );
304298
});
305-
}
306-
: function( clicked, $hide, $show ) {
299+
} else {
300+
show.removeClass( "ui-tabs-hide" );
301+
self._trigger( "show", event, self._ui( clicked, show[ 0 ] ) );
302+
}
303+
},
304+
305+
_hideTab: function( clicked, $hide ) {
306+
var self = this;
307+
308+
if ( this.hideFx ) {
309+
$hide.animate( hideFx, hideFx.duration || "normal", function() {
307310
self.lis.removeClass( "ui-tabs-selected ui-state-active" );
308311
$hide.addClass( "ui-tabs-hide" );
312+
self._resetStyle( $hide, hideFx );
309313
self.element.dequeue( "tabs" );
310-
};
314+
});
315+
} else {
316+
self.lis.removeClass( "ui-tabs-selected ui-state-active" );
317+
$hide.addClass( "ui-tabs-hide" );
318+
self.element.dequeue( "tabs" );
319+
}
320+
},
311321

312-
// attach tab event handler, unbind to avoid duplicates from former tabifying...
313-
this.anchors.bind( o.event + ".tabs", function( event ) {
314-
event.preventDefault();
315-
var el = this,
316-
$li = $(el).closest( "li" ),
317-
$hide = self.panels.filter( ":not(.ui-tabs-hide)" ),
318-
$show = self.element.find( self._sanitizeSelector( el.hash ) );
319-
320-
// If tab is already selected and not collapsible or tab disabled or
321-
// or is already loading or click callback returns false stop here.
322-
// Check if click handler returns false last so that it is not executed
323-
// for a disabled or loading tab!
324-
if ( ( $li.hasClass( "ui-tabs-selected" ) && !o.collapsible) ||
325-
$li.hasClass( "ui-state-disabled" ) ||
326-
$li.hasClass( "ui-state-processing" ) ||
327-
self.panels.filter( ":animated" ).length ||
328-
self._trigger( "select", event, self._ui( this, $show[ 0 ] ) ) === false ) {
329-
this.blur();
330-
return;
331-
}
322+
_eventHandler: function( event ) {
323+
event.preventDefault();
324+
var self = this,
325+
o = this.options,
326+
el = event.currentTarget,
327+
$li = $(el).closest( "li" ),
328+
$hide = self.panels.filter( ":not(.ui-tabs-hide)" ),
329+
$show = self.element.find( self._sanitizeSelector( el.hash ) );
330+
331+
// If tab is already selected and not collapsible or tab disabled or
332+
// or is already loading or click callback returns false stop here.
333+
// Check if click handler returns false last so that it is not executed
334+
// for a disabled or loading tab!
335+
if ( ( $li.hasClass( "ui-tabs-selected" ) && !o.collapsible) ||
336+
$li.hasClass( "ui-state-disabled" ) ||
337+
$li.hasClass( "ui-state-processing" ) ||
338+
self.panels.filter( ":animated" ).length ||
339+
self._trigger( "select", event, self._ui( el, $show[ 0 ] ) ) === false ) {
340+
el.blur();
341+
return;
342+
}
332343

333-
o.selected = self.anchors.index( this );
344+
o.selected = self.anchors.index( el );
334345

335-
self.abort();
346+
self.abort();
336347

337-
// if tab may be closed
338-
if ( o.collapsible ) {
339-
if ( $li.hasClass( "ui-tabs-selected" ) ) {
340-
o.selected = -1;
348+
// if tab may be closed
349+
if ( o.collapsible ) {
350+
if ( $li.hasClass( "ui-tabs-selected" ) ) {
351+
o.selected = -1;
341352

342-
if ( o.cookie ) {
343-
self._cookie( o.selected, o.cookie );
344-
}
353+
if ( o.cookie ) {
354+
self._cookie( o.selected, o.cookie );
355+
}
345356

346-
self.element.queue( "tabs", function() {
347-
hideTab( el, $hide );
348-
}).dequeue( "tabs" );
357+
self.element.queue( "tabs", function() {
358+
self._hideTab( el, $hide );
359+
}).dequeue( "tabs" );
349360

350-
this.blur();
351-
return;
352-
} else if ( !$hide.length ) {
353-
if ( o.cookie ) {
354-
self._cookie( o.selected, o.cookie );
355-
}
361+
el.blur();
362+
return;
363+
} else if ( !$hide.length ) {
364+
if ( o.cookie ) {
365+
self._cookie( o.selected, o.cookie );
366+
}
356367

357-
self.element.queue( "tabs", function() {
358-
showTab( el, $show, event );
359-
});
368+
self.element.queue( "tabs", function() {
369+
self._showTab( el, $show, event );
370+
});
360371

361-
// TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171
362-
self.load( self.anchors.index( this ) );
372+
// TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171
373+
self.load( self.anchors.index( el ) );
363374

364-
this.blur();
365-
return;
366-
}
375+
el.blur();
376+
return;
367377
}
378+
}
368379

369-
if ( o.cookie ) {
370-
self._cookie( o.selected, o.cookie );
371-
}
380+
if ( o.cookie ) {
381+
self._cookie( o.selected, o.cookie );
382+
}
372383

373-
// show new tab
374-
if ( $show.length ) {
375-
if ( $hide.length ) {
376-
self.element.queue( "tabs", function() {
377-
hideTab( el, $hide );
378-
});
379-
}
384+
// show new tab
385+
if ( $show.length ) {
386+
if ( $hide.length ) {
380387
self.element.queue( "tabs", function() {
381-
showTab( el, $show, event );
388+
self._hideTab( el, $hide );
382389
});
383-
384-
self.load( self.anchors.index( this ) );
385-
} else {
386-
throw "jQuery UI Tabs: Mismatching fragment identifier.";
387390
}
391+
self.element.queue( "tabs", function() {
392+
self._showTab( el, $show, event );
393+
});
388394

389-
// Prevent IE from keeping other link focussed when using the back button
390-
// and remove dotted border from clicked link. This is controlled via CSS
391-
// in modern browsers; blur() removes focus from address bar in Firefox
392-
// which can become a usability
393-
if ( $.browser.msie ) {
394-
this.blur();
395-
}
396-
});
395+
self.load( self.anchors.index( el ) );
396+
} else {
397+
throw "jQuery UI Tabs: Mismatching fragment identifier.";
398+
}
397399

398-
// disable click in any case
399-
this.anchors.bind( "click.tabs", function( event ){
400-
event.preventDefault();
401-
});
400+
// Prevent IE from keeping other link focussed when using the back button
401+
// and remove dotted border from clicked link. This is controlled via CSS
402+
// in modern browsers; blur() removes focus from address bar in Firefox
403+
// which can become a usability
404+
if ( $.browser.msie ) {
405+
el.blur();
406+
}
402407
},
403408

404409
_getIndex: function( index ) {

0 commit comments

Comments
 (0)