jQuery UI 是否缺少状态？答案

【问题标题】：Is jQuery UI missing a state?jQuery UI 是否缺少状态？
【发布时间】：2010-10-04 02:25:44
【问题描述】：

jQuery UI 小部件似乎具有非活动、活动和悬停状态，但缺少抑郁（单击并按住）状态。这是疏忽吗？几乎每一个我能想到的现代 UI 都有一个沮丧的状态。有没有人添加这样的状态？如果是这样，您必须接触哪些代码？

编辑：我应该说的是悬停和点击状态看起来是一样的。应该有另一种状态，以便您可以看到您在悬停后单击了。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-plugins

【解决方案1】：

在 HTML/CSS 中，活动状态适用于“当用户激活元素时。例如，在用户按下鼠标按钮并释放它的时间之间。” （CSS 2.1 Section 5.11.3）如果是按钮，那将是按下状态。

我只是假设这也适用于 jQuery UI。

【讨论】：

好吧，我不认为这是完全正确的。 HTML 按钮（至少在 FF 和 Chrome 中）具有按下（单击并按住）状态。其他一些 UI 库具有额外的状态（如 ExtJS）。就像现在一样，jQuery UI 中没有足够的状态来完全皮肤 BUTTON。
我应该说的是悬停看起来与单击并按住相同，所以我仍然缺少一个状态。悬停时会发生变化，但单击时不会发生变化。
如果悬停和活动看起来相同，则会出现问题，因为它们应该不同。

【解决方案2】：

不要忘记在你的 CSS 中，你可以组合伪选择器：

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

a:active 和 a:active:hover 之间有明显的区别：可以通过使用键盘点击链接来激活链接。虽然它不是 100% 万无一失，但处于活动状态和悬停状态会表明用户已按下链接。改变边框样式会给你想要的效果。唯一的错误是如果链接变为活动状态，然后用户将鼠标悬停在它上面而不点击，它仍然会变得沮丧。

试试这个 CSS 看看我的意思：

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

【讨论】：

谢谢。我知道这一切。我想知道为什么 jQuery UI 界面在悬停和按下按钮时没有显示差异。
这是我现在对 jQuery UI 的一个特别烦恼。它似乎没有办法确保锚在 jQuery UI 框架内保持其主题能力。如果您想要一个可主题化的界面，上面的代码没有帮助，您必须为每个主题维护一个单独的 .css 文件。

【解决方案3】：

看起来是故意的。请注意，在 Themeroller 中有一个可点击的：活动状态设置区域，但它不像 css 活动状态。 jQuery UI 1.7 包的快速 grep 显示没有 :active 的样式。看起来他们设计了 ui 状态来为其小部件提供视觉提示，将 :active 留给开发人员使用。

【讨论】：