问题
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 is to have as much control of styles as possible
回答1:
In order to override the jquery-ui css use the !important tag.
.ui-dialog {
background-color: black !important;
}
回答2:
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!
回答3:
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.
回答4:
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...
来源：https://stackoverflow.com/questions/4017884/how-to-override-jquery-ui-widget-styles-and-keep-the-functionality