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 states look the same. There should be another state so you can see that you've clicked after hovering.

score 1 · Answer 1 · answered Jan 28 '09 at 20:37

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.

answered Jan 28 '09 at 20:37

Powerlord

87,612
17
125
175

Well, I don't think that's strictly true. HTML buttons (at least in FF and Chrome) have a depressed (clicked and held) state. Some other UI libraries have the extra state (like ExtJS). As it is now, there are not enough states in jQuery UI to fully skin BUTTON. – Jan 28 '09 at 20:46
What I SHOULD have said is that hover looks the same as clicked-and-held, so I'm still missing a state. You get a change when you hover, but not when you click. – Jan 28 '09 at 20:54
There's a problem if hover and active look the same, as they *should* be different. – Powerlord Jan 28 '09 at 22:05

score 1 · Answer 2 · answered Jan 29 '09 at 00:19

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;
}

Thanks. I know all that. I'm wondering why the jQuery UI interface doesn't show a difference between when you hover and when you depress a button. — , Jan 29 '09 at 01:44
This is a particular annoyance that I have with the jQuery UI right now. It does not appear to have a way to insure that anchors maintain their theme-ability and within the jQuery UI framework. The code above does not help if you want a themeable interface, you'd have to maintain a separate .css file for each theme. — CodeMonkeyKing, Apr 22 '09 at 17:36

score 0 · Answer 3 · answered Apr 13 '09 at 21:11

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.

Is jQuery UI missing a state?

3 Answers3