jQuery UI API 文档

CSS 框架

以下是 jQuery UI 使用的类名列表。这些类旨在在整个应用程序中创建视觉一致性，并允许组件通过 jQuery UI ThemeRoller 进行主题化。类名根据样式是固定的和结构性的还是可主题化的（颜色、字体、背景等）分别拆分为 ui.core.css 和 ui.theme.css。

布局帮助器

.ui-helper-hidden：从视觉上和辅助技术（例如屏幕阅读器）中隐藏内容。
.ui-helper-hidden-accessible：从视觉上隐藏内容，但使其可供辅助技术使用。
.ui-helper-reset：DOM 节点的基本样式重置。重置填充、边距、文本修饰、列表样式等。
.ui-helper-clearfix：将浮动换行属性应用于父元素。
.ui-front：应用 z 索引来管理屏幕上多个小部件的堆叠。有关更多详细信息，请参阅有关堆叠元素的页面。

小部件容器

.ui-widget：应用于所有小部件外部容器的类。将字体系列和字体大小应用于小部件。
.ui-widget-header：应用于标题容器的类。将标题容器样式应用于元素及其子文本、链接和图标。
.ui-widget-content：应用于内容容器的类。将内容容器样式应用于元素及其子文本、链接和图标。（可以应用于标题的父级或同级）。

交互状态

.ui-state-default：应用于可点击按钮状元素的类。将“可点击默认”容器样式应用于元素及其子文本、链接和图标。
.ui-state-hover：将鼠标悬停在可点击按钮状元素上时应用的类。将“可点击悬停”容器样式应用于元素及其子文本、链接和图标。
.ui-state-focus：应用于可点击按钮状元素的键盘焦点类。将“可点击焦点”容器样式应用于元素及其子文本、链接和图标。
.ui-state-active：应用于可点击按钮状元素的鼠标按下类。将“可点击激活”容器样式应用于元素及其子文本、链接和图标。

交互提示

.ui-state-highlight：应用于高亮或选定元素的类。将“高亮”容器样式应用于元素及其子文本、链接和图标。
.ui-state-error：应用于错误消息容器元素的类。将“错误”容器样式应用于元素及其子文本、链接和图标。
.ui-state-error-text：仅应用错误文本颜色而不应用背景的附加类。例如，可用于表单标签。还将错误图标颜色应用于子图标。
.ui-state-disabled：对禁用的 UI 元素应用调暗的不透明度。旨在添加到已设置样式的元素中。
.ui-priority-primary：在需要按钮层级的情况下应用于优先级 1 按钮的类。
.ui-priority-secondary：在需要按钮层级的情况下应用于优先级 2 按钮的类。

图标

状态和图像

.ui-icon：应用于图标元素的基本类。将尺寸设置为 16 像素的正方形块，隐藏内部文本，并将背景图像设置为“内容”状态精灵图像。注意：ui-icon 类将根据其父容器获得不同的精灵背景图像。例如，ui-state-default 容器中的 ui-icon 元素将根据 ui-state-default 的图标颜色着色。

图标类型

声明 ui-icon 类后，你可以使用第二个类来描述图标类型。图标类通常遵循 .ui-icon-{icon type}-{icon sub description}-{direction} 的语法。

例如，指向右边的单个三角形图标如下所示：.ui-icon-triangle-1-e。ThemeRoller 在其预览列中提供了完整的 CSS 框架图标集。将鼠标悬停在它们上面以查看类名。

其他视觉效果

圆角辅助工具

.ui-corner-tl：将圆角应用于元素的左上角。
.ui-corner-tr：将圆角应用于元素的右上角。
.ui-corner-bl：将圆角应用于元素的左下角。
.ui-corner-br：将圆角应用于元素的右下角。
.ui-corner-top：将圆角应用于元素的两个上角。
.ui-corner-bottom：将圆角应用于元素的两个下角。
.ui-corner-right：将圆角应用于元素的两个右角。
.ui-corner-left：将圆角应用于元素的两个左角。
.ui-corner-all：将圆角应用于元素的全部 4 个角。

覆盖和阴影

.ui-widget-overlay：将 100% 的宽度和高度尺寸应用于覆盖屏幕，以及背景颜色/纹理和屏幕不透明度。
.ui-widget-shadow：应用于覆盖小部件阴影元素的类。设置 box-shadow x 和 y 偏移、模糊半径和颜色。