jQuery UI CSS 框架 API

jQuery UI CSS 框架

jQuery UI的CSS框架功能强大，它是为了创建自定义jQuery小部件而设计的。框架包括很多适合多数用户界面需要的CSS类，且可使用jQuery UI ThemeRoller进行维护。通过使用jQuery UI CSS框架创建您自己的UI组件。您需采用共享标记公约，以便在插件社区的代码集成。

框架类

以下的CSS类根据样式是否是固定的结构化的，或者是否是可主题化的（颜色、字体、背景等），来分别定义在

1. ui.core.css

和

1. ui.theme.css

两个文件中。这些类被设计来用于用户界面元素，以便获得整个应用程序的视觉一致性，可通过jQuery UI ThemeRoller对组件进行主题化。

布局助手

• 1. .ui-helper-hidden
  ：对元素应用
  1. display: none
  。
• 1. .ui-helper-hidden-accessible
  ：对元素应用访问隐藏（通过页面绝对定位）。
• 1. .ui-helper-reset
  ：UI元素的基本样式重置。重置的元素比如：
  1. padding
  、
  1. margin
  、
  1. text-decoration
  、list-style等等。
• 1. .ui-helper-clearfix
  ：对父元素应用浮动包装属性。
• 1. .ui-helper-zfix
  ：对
  1. <iframe>
  元素应用iframe "fix" CSS。

小部件容器

• 1. .ui-widget
  ：对所有小部件的外部容器应用的Class。对小部件应用字体和字体尺寸，同时也对自表单元素应用相同的字体和1em的字体尺寸，以应对 Windows浏览器中的继承问题。
• 1. .ui-widget-header
  ：对标题容器应用的Class。对元素及其子元素的文本、链接、图标应用标题容器样式。
• 1. .ui-widget-content
  ：对内容容器应用的Class。对元素及其子元素的文本、链接、图标应用内容容器样式。（可应用到标题的父元素或者同级元素）

交互状态

• 1. .ui-state-default
  ：对可点击按钮元素应用的Class。对元素及其子元素的文本、链接、图标应用"clickable default"容器样式。
• 1. .ui-state-hover
  ：当鼠标悬浮在可点击按钮元素上时应用的Class。对元素及其子元素的文本、链接、图标应用"clickable hover"容器样式。
• 1. .ui-state-focus
  ：当键盘聚焦在可点击按钮元素上时应用的Class。对元素及其子元素的文本、链接、图标应用"clickable hover"容器样式。
• 1. .ui-state-active
  ：当鼠标点击可点击按钮元素上时应用的Class。对元素及其子元素的文本、链接、图标应用"clickable active"容器样式。

交互提示 Cues

• 1. .ui-state-highlight
  ：对高亮或者选中元素应用的Class。对元素及其子元素的文本、链接、图标应用"highlight"容器样式。
• 1. .ui-state-error
  ：对错误消息容器元素应用的Class。对元素及其子元素的文本、链接、图标应用"error"容器样式。
• 1. .ui-state-error-text
  ：对只有无背景的错误文本颜色应用的Class。可用于表单标签，也可以对子图标应用错误图标颜色。
• 1. .ui-state-disabled
  ：对禁用的UI元素应用一个暗淡的不透明度。意味着对一个已经定义样式的元素添加额外的样式。
• 1. .ui-priority-primary
  ：对第一优先权的按钮应用的Class。应用粗体文本。
• 1. .ui-priority-secondary
  ：对第二优先权的按钮应用的Class。应用正常粗细的文本，对元素应用轻微的透明度。

图标

状态和图像

• 1. .ui-icon
  ：对图标元素应用的基本Class。设置尺寸为16px方块，隐藏内部文本，对"content"状态的精灵图像设置背景图像。注意：
  1. .ui-icon
  class将根据它的父容器得到一个不同的精灵背景图像。例如，
  1. ui-state-default
  容器内的
  1. ui-icon
  元素将根据
  1. ui-state-default
  的图标颜色进行着色。

图标类型

在声明

1. .ui-icon

class之后，接着您可以声明一个秒速图标类型的class。通常情况下，图标class遵循语法

1. .ui-icon-{icon type}-{icon sub description}-{direction}

。

例如，一个指向右侧的三角形图标，如下所示：

1. .ui-icon-triangle-1-e

jQuery UI的ThemeRoller在它的预览一栏中提供了全套的CSS框架图标。将鼠标悬浮在图标上可查看class名称。

其他视觉效果

圆角半径助手

• 1. .ui-corner-tl
  ：对元素的左上角应用圆角半径。
• 1. .ui-corner-tr
  ：对元素的右上角应用圆角半径。
• 1. .ui-corner-bl
  ：对元素的左下角应用圆角半径。
• 1. .ui-corner-br
  ：对元素的右下角应用圆角半径。
• 1. .ui-corner-top
  ：对元素上边的左右角应用圆角半径。
• 1. .ui-corner-bottom
  ：对元素下边的左右角应用圆角半径。
• 1. .ui-corner-right
  ：对元素右边的上下角应用圆角半径。
• 1. .ui-corner-left
  ：对元素左边的上下角应用圆角半径。
• 1. .ui-corner-all
  ：对元素的所有四个角应用圆角半径。

覆盖 & 阴影

• 1. .ui-widget-overlay
  ：对覆盖屏幕应用100%宽度和高度，同时设置背景颜色/纹理和屏幕不透明度。
• 1. .ui-widget-shadow
  ：对覆盖应用的Class，设置了不透明度、上偏移/左偏移，以及阴影的 "厚度"。厚度是通过对阴影所有边设置内边距（padding）进行应用的。偏移是通过设置上外边距（margin）和左外边距（margin）进行应用的（可以是正数，也可以是负数）。