Need to explicitly call .button() to apply JQuery UI style?

Question

We have a couple <button> elements which we style with JQuery UI like this: $("#my-button" ).button();. Is there a way to have JQuery UI automatically style the buttons without explicity writing that code?

Answer 1

Presumably if your problem is having to duplicate code for each button then you could give them all a class and use $('.stylemeplease').button() or if its all buttons $('button').button().

It may be that there is a way to do it magically for anything that's a button or that there might be built in magic classes but if so I don't know of them offhand...

Answer 2

Yes you can. All you have to do is all the class to the button.

You just need to add this class:

class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">Cool Button</button>

Of course you will need to add your own padding in there.