Skip to content

Instantly share code, notes, and snippets.

@jhilden
Created August 28, 2012 10:33
Show Gist options
  • Save jhilden/3497023 to your computer and use it in GitHub Desktop.
Save jhilden/3497023 to your computer and use it in GitHub Desktop.
Remove jquery-ui styling for tabs
$ ->
jquery_ui_classes = [".ui-tabs", ".ui-tabs-nav", ".ui-tabs-panel", ".ui-widget", ".ui-widget-header", ".ui-widget-content", ".ui-corner-all", ".ui-corner-top", ".ui-corner-bottom", ".ui-helper-clearfix", ".ui-helper-reset", ".ui-state-default"]
$(".js-tabs").tabs().each ->
# removes all the jquery-ui specific classes (except ones like ui-state-active)
$elements = $(this).find( jquery_ui_classes.join(", ") ).andSelf()
$elements.removeClass( jquery_ui_classes.join(" ").replace(/\./g, "") )
// using the new Sass 3.2 placeholder selector
%reset-jquery-ui-tabs
.ui-state-active, .ui-state-hover, .ui-state-focus
background: none
border: none
.m-tabs
@extend %reset-jquery-ui-tabs
// ...
@Holek
Copy link

Holek commented Aug 28, 2012

Why not just remove the UI tabs-related CSS from jQuery UI CSS file?

@jhilden
Copy link
Author

jhilden commented Aug 28, 2012

Good question! There are basically 2 reasons:

First, classes like "ui-widget" or "ui-border-all" are also used for all the other widgets so removing them would cripple them as well. The use case here is that you don't want to style your own datepicker or autocomplete (yet), but you probably want to style your own tabs (because they are really ugly).

Secondly, if you want to maintain upgradeability for future jquery-UI versions (although they don't come very often ;)) it's difficult to rip out the tab styles in a reproducible way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment