jquery-ui CSS, without JS

The JQuery-UI framework is really nice, for getting consistent look and feel on interface objects, with a well-thought and well-tested (both in terms of what works in browsers, and usability) design (instead of constantly re-inventing from scratch). And it’s themable, with a new theme changing everything at once.

Sometimes I want to style something using a JQuery-UI style, but I don’t really want/need the full JS treatment. For instance, you _could_ make something into a JQuery-UI button by using the button widget linked there — write some JS that finds all the elements you want to turn into buttons, and calls the button() method on them.

But, I’m thinking, isn’t there a way to do this purely with CSS classes?  I shouldn’t need JS just to make something look like an appropriately themed JQuery-UI button, should I?  Would keep it simpler, plus looking right even if someone has JS turned off.

I had trouble figuring out how to do this, although it seemed it ought to be possible (in part because JQuery-UI is so well designed, that in general when something seems like it makes sense, I figure there’s probably a way to do it), wasn’t really documented on the JQuery-UI pages.

Then I found this post, from these developers who I think are either core JQuery-UI developers or the original developers of JQuery-UI before it became a community project, or perhaps both. So I link it here now for y’all. Shows how to do just this for buttons and themed mini-icons, — in their example you still need (simple) JS to get hover states to work properly, but you can style the basic button just with CSS.

(The JS for hover states is, thinking about it, kind of neccesary just cause of the way JQuery-UI is set up. You could approximate the same thing yourself manually with CSS :hover :active etc, but not automatically inherit the current JQuery-UI theme that way. I’m fine with hover state not working if JS is turned off, still nice to get the basic button without JS).

Styling Buttons and Toolbars with the jQuery UI CSS Framework

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s