How do I prevent jquery UI from adding styles automatically?

Question

I'm wondering what is the easiest way of telling jquery UI not to add style classes? I am trying to use the tabs plugin, which has a lot of functionality I want... but I actually want it to do NOTHING when it comes to styles. I want to be in total charge of it, because frankly, the defaults are too busy and just don't work for a minimlist design.

I found a similar question here...: jquery ui tabs major style change

... But they never got around to preventing the classes from being added in the first place.

You can just refuse to load the css theme at the top of the document, but then the tabs widget just ceases to work despite not causing any javascript errors. The entire situation is just awful to be in, and I'd hate to have to program my own tabs widget just because jquery UI refuses to let me use my own styles :(

Help?

Answer 1

If you want existing styling, with the exception of some widgets (tabs), you could add an outer div#mytabs and then override any default styling applied by jquery UI.

Quick (rough) demo to illustrate my point.

#mytabs #tabs2 ul.ui-tabs-nav{
    background:lime;
    border-radius:0;
}
#mytabs #tabs2.ui-tabs, #mytabs #tabs2.ui-widget{
    border:magenta;
    border-radius:0;
    background:cyan;
}

This would give you the option of using the default styling (even of tabs) in a different area. You could, of course, just change the styling (or again, do overrides) on the .ui-tabs-nav classes.

Answer 2

If you're looking for a jQuery UI option that prevents the adding of classes, you are out of luck.

Your best bet is as @brett suggested, make a minimalist theme. Alternatively, I can imagine a javascript function that given an DOM element, searched through it and children looking for a list of classes in their class attribute, then removing each one. Seems evil though!