Buttons and ui-state-active
So I've been working on a new UI theme that implements the jQuery UI CSS Framework, while simultaneously writing the UI components for script.aculo.us 2.0. The goal is to make all jQuery UI themes compatible with scripty2 UI, and vice-versa. But I've hit a snag while working on buttons.
It seems that the
ui-state-active class is overloaded to represent two things:
- On regular buttons, it's used to indicate the "down" state (applied on mousedown and removed on mouseup).
- On toggle buttons, it's used to indicate the "selected" state (applied on one click, removed on the next).
This means that there's no way to have a toggle button with a "down" state; it also means that, without some serious CSS-fu, a toggle button's "selected" state must look the same as a regular button's "down" state. This puts some serious constraints on a theme's look and feel.
This could be avoided by using different class names for these two states, but then cross-compatibility becomes tricky. (I'm trying to work around this by introducing a
ui-state-down class in scripty2, but that gets quite complicated). It could even be mitigated somewhat if it were possible to target only toggle buttons in the CSS (e.g., with a
ui-button-toggle class name).
Is there any chance this will be addressed in the next version of jQuery UI? I searched this forum, the dev wiki, and a couple other places, but couldn't find any discussion of this dilemma.
Cheers,
Andrew Dupont