Is jQuery UI missing a state?

Question

The jQuery UI widgets seem to have inactive, active, and hover states, but lack a depressed (clicked-and-held) state. Is this an oversight? Just about every modern UI I can think of have a depressed state. Has anyone added such a state? If so, what pieces of code did you have to touch?

---

Edit: What I should have said is that hovering and clicked look the same. There should be another state so you can see that you've clicked after hovering.

Answer 1

In HTML/CSS, the active state applies "while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it." (CSS 2.1 Section 5.11.3) In the case of buttons, that would be the depressed state.

I just assume that applies to jQuery UI as well.

Answer 2

Don't forget that in your CSS, you can combine the pseudo-selectors:

a:link {
    color: blue;
}
a:hover {
    color: green;
}
a:visited {
    color: purple;
}
a:active {
    /* link is active */
    color: red;
}
a:visited:hover {
    /* hovering on a visited link */
    color: pink;
}
a:active:hover {
    /* hovering on an active link */
    color: black;
}
a:visited:active:hover {
    color: fuchsia;
}

There's a definite difference between a:active and a:active:hover : a link can become active by tabbing to it using the keyboard. Though it's not 100% foolproof, the state of being active and hovered would suggest that the user has the link depressed. Altering the border style would give you the desired effect. The only bug in this is if the link becomes active and then the user hovers over it without clicking, it'll still go depressed.

Try this CSS to see what I mean:

a {
    padding: 5px 10px;
    background-color: gray;
    border-color: gray;
    border-style: outset;
}
a:active:hover {
    border-style: inset;
}

Answer 3

Here's what I mean. Go to the ThemeRoller and try the sample widgets.

Hover over the Accordion controls. You see the hover state. Now click and hold. No visual change. Same with the tabs. Same with the Open Dialog Button. Same with the DatePicker. The slider, however, does have a state change, but that's because it's draggable.

I think the problem is that no change is made on down-click for almost all of these. Maybe it would be easy to fix in the event code.

I just find this to be very odd. Hover should not be the same as depressed. It makes the interface feel "dead."

Answer 4

It looks to be on purpose. Notice in Themeroller there is a clickable: active state settings area, but it does not behave as the css active state. A quick grep of a jQuery UI 1.7 package shows no styling for :active. It kinda seems like they designed the ui state for visual cues to their widgets, leaving the :active to the developer to use.