下面是 jQuery UI 使用的 Class 名称列表。这些 Class 用来创建跨应用程序的视觉一致性,且允许组件通过 jQuery UI ThemeRoller 进行主题化。下面的 CSS 类根据样式是否是固定的结构化的,或者是否是可主题化的(颜色、字体、背景等),分别定义在 ui.core.css 和 ui.theme.css 两个文件中。
.ui-helper-hidden
:对元素应用 display: none
。.ui-helper-hidden-accessible
:对元素应用访问隐藏(通过页面绝对定位)。.ui-helper-reset
:UI 元素的基本样式重置。重置的元素比如:padding
、margin
、text-decoration
、list-style,等等。.ui-helper-clearfix
:对父元素应用浮动包装属性。.ui-helper-zfix
:对 <iframe>
元素应用 iframe "fix" CSS。.ui-front
:应用 z-index 来管理屏幕上多个小部件的堆叠,如需了解更多详情,请查看 堆叠元素(Stacking Elements) 页面。.ui-widget
:对所有小部件的外部容器应用的 Class。对小部件应用字体和字体尺寸,同时也对自表单元素应用相同的字体和 1em 的字体尺寸,以应对 Windows 浏览器中的继承问题。.ui-widget-header
:对标题容器应用的 Class。对元素及其子元素的文本、链接、图标应用标题容器样式。.ui-widget-content
:对内容容器应用的 Class。对元素及其子元素的文本、链接、图标应用内容容器样式。(可应用到标题的父元素或者同级元素).ui-state-default
:对可点击按钮元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable default" 容器样式。.ui-state-hover
:当鼠标悬浮在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable hover" 容器样式。.ui-state-focus
:当键盘聚焦在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable hover" 容器样式。.ui-state-active
:当鼠标点击可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable active" 容器样式。.ui-state-highlight
:对高亮或者选中元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "highlight" 容器样式。.ui-state-error
:对错误消息容器元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "error" 容器样式。.ui-state-error-text
:对只有无背景的错误文本颜色应用的 Class。可用于表单标签,也可以对子图标应用错误图标颜色。.ui-state-disabled
:对禁用的 UI 元素应用一个暗淡的不透明度。意味着对一个已经定义样式的元素添加额外的样式。.ui-priority-primary
:对第一优先权的按钮应用的 Class。应用粗体文本。.ui-priority-secondary
:对第二优先权的按钮应用的 Class。应用正常粗细的文本,对元素应用轻微的透明度。.ui-icon
:对图标元素应用的基本 Class。设置尺寸为 16px 方块,隐藏内部文本,对 "content" 状态的精灵图像设置背景图像。注意: .ui-icon
class 将根据它的父容器得到一个不同的精灵背景图像。例如,ui-state-default
容器内的 ui-icon
元素将根据 ui-state-default
的图标颜色进行着色。在声明 .ui-icon
class 之后,接着您可以声明一个秒速图标类型的 class。通常情况下,图标 class 遵循语法 .ui-icon-{icon type}-{icon sub description}-{direction}
。
例如,一个指向右侧的三角形图标,如下所示: .ui-icon-triangle-1-e
jQuery UI 的 ThemeRoller 在它的预览一栏中提供了全套的 CSS 框架图标。将鼠标悬浮在图标上可查看 class 名称。
.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
:对元素的所有四个角应用圆角半径。.ui-widget-overlay
:对覆盖屏幕应用 100% 宽度和高度,同时设置背景颜色/纹理和屏幕不透明度。.ui-widget-shadow
:对覆盖应用的 Class,设置了不透明度、上偏移/左偏移,以及阴影的 "厚度"。厚度是通过对阴影所有边设置内边距(padding)进行应用的。偏移是通过设置上外边距(margin)和左外边距(margin)进行应用的(可以是正数,也可以是负数)。