How to override jQuery UI Widget Styles and Keep the Functionality

I am using jQuery UI for an in-house application.

I am looking for an easy way to remove all style information provided by jQuery UI on a given widget instance. I'm open to really anything, but a reusable javascript solution would be perfect. It's absolutely imperative that no functionality is lost.

the most important thing is that all background-images are removed, I'm ok with keeping the layout styles.

ideally something like...

$tabs = $("#someElement").tabs();
$tabs.removeStyles();

But I'm open to whatever allows me to modify widget styles in a flexible way.

The end goal i开发者_运维技巧s to have as much control of styles as possible

In order to override the jquery-ui css use the !important tag.

.ui-dialog {
  background-color: black !important;
  }

The easier way to remove CSS styles/classes is to use .removeClass(). For example, to override all the corners of the tabs and have only top corners, I use it like this:

$('#tabs').tabs().removeClass('ui-corner-all').addClass('ui-corner-top');

Hope this helps!

You could easily create a removeStyles function of your own.

$.fn.removeStyles = function(){
 $(this).attr('class','');
};

This would remove all styles from the element you select.

Edit: If you want to remove only the classes that jquery ui creates you have limited options. You could compare the classes in the class attribute to a list of jquery-ui classes you've typed. There's no magic bullet which will remove jquery ui automagically.

you can just remove the css file and start rebuilding that with just the layout you want. it is a lot of work but that's the price that comes with it...