jQuery UI的CSS框架

jQuery UI的CSS框架设计得非常鲁棒方便用于定制用户界面控件。框架包括很多适合多数用户界面需要的CSS类，这些类能用jQuery UI ThemeRoller来所见即所得地修改。如果你的控件也采用本框架，你的控件就可以和社区的其它大量控件或者代码更容易地集成。

框架类

The following CSS classes are split between ui.core.css and ui.theme.css, depending on whether styles are fixed and structural, or themeable (colors, fonts, backgrounds, etc) respectively. These classes are designed to be applied to User Interface elements to achieve visual consistency across an application and allow components to be themeable by jQuery UI ThemeRoller.

Layout Helpers布局辅助类

• .ui-helper-hidden: 让元素不显示(display: none).
• .ui-helper-hidden-accessible: 将位置设置到屏幕之外让元素看不见(但不是display:none)
• .ui-helper-reset:  清除一些基本的样式属性比如padding, margins, text-decoration, list-style等.
• .ui-helper-clearfix: Applies float wrapping properties to parent elements
• .ui-helper-zfix: Applies iframe "fix" css to iframe elements when needed in overlays.

Widget Containers控件容器

• .ui-widget: 所有那些控件的最外层容器元素必须包括此类. Applies font family and font size to widget. Also applies same family and 1em font size to child form elements specifically, to combat inheritance issues in Win browsers.
• .ui-widget-header: 应用于控件头Class to be applied to header containers. Applies header container styles to an element and its child text, links, and icons.
• .ui-widget-content: 应用于控件内容Class to be applied to content containers. Applies content container styles to an element and its child text, links, and icons. (can be applied to parent or sibling of header)

Interaction States界面状态

• .ui-state-default: 所有clickable的元素的缺省状态Class to be applied to clickable button-like elements. Applies "clickable default" container styles to an element and its child text, links, and icons.
• .ui-state-hover: 所有clickable的元素在鼠标移动其上的状态Class to be applied on mouseover to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons.
• .ui-state-focus: 所有clickable的元素的获取到键盘焦点的状态Class to be applied on keyboard focus to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons.
• .ui-state-active: 所有clickable的元素当鼠标在其上按下但未弹起时的状态Class to be applied on mousedown to clickable button-like elements. Applies "clickable active" container styles to an element and its child text, links, and icons.

Interaction Cues界面提示

• .ui-state-highlight: 所有可进行选择的元素被选择上的或者高亮的状态Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons.
• .ui-state-error: 应用于显示错误消息的容器元素Class to be applied to error messaging container elements. Applies "error" container styles to an element and its child text, links, and icons.
• .ui-state-error-text: 额外的类用于显示错误文本(不包括背景)An additional class that applies just the error text color without background. Can be used on form labels for instance. Also applies error icon color to child icons.
• .ui-state-disabled: 应用于那些被禁用的用户界面元素Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element.
• .ui-priority-primary: 应用于第一优先级的按钮Class to be applied to a priority-1 button in situations where button hierarchy is needed. Applies bold text.
• .ui-priority-secondary: 应用于第二优先级的按钮Class to be applied to a priority-2 button in situations where button hierarchy is needed. Applies normal weight text and slight transparency to element.

Icons图标

States and images状态和图片

• .ui-icon: 图标元素的基本类Base class to be applied to an icon element. Sets dimensions to 16px square block, hides inner text, sets background image to "content" state sprite image. Note: .ui-icon class will be given a different sprite background image depending on its parent container. For example, a ui-icon element within a ui-state-default container will get colored according to the ui-state-default's icon color.

Icon types

After declaring a ".ui-icon" class, you can follow up with a second class describing the type of icon you'd like. Icon classes generally follow a syntax of .ui-icon-{icon type}-{icon sub description}-{direction}.

For example, a single triangle icon pointing to the right looks like this: .ui-icon-triangle-1-e

jQuery UI's ThemeRoller provides the full set of CSS framework icons in its preview column. Hover over them to see the class name.

Misc Visuals

Corner Radius helpers

• .ui-corner-tl: Applies corner-radius to top left corner of element.
• .ui-corner-tr: Applies corner-radius to top right corner of element.
• .ui-corner-bl: Applies corner-radius to bottom left corner of element.
• .ui-corner-br: Applies corner-radius to bottom right corner of element.
• .ui-corner-top: Applies corner-radius to both top corners of element.
• .ui-corner-bottom: Applies corner-radius to both bottom corners of element.
• .ui-corner-right: Applies corner-radius to both right corners of element.
• .ui-corner-left: Applies corner-radius to both left corners of element.
• .ui-corner-all: Applies corner-radius to all 4 corners of element.

Overlay & Shadow

• .ui-widget-overlay: Applies 100% wxh dimensions to an overlay screen, along with background color/texture, and screen opacity.
• .ui-widget-shadow: Class to be applied to overlay widget shadow elements. Applies background color/texture, custom corner radius, opacity, top/left offsets and shadow "thickness". Thickness is applied via padding to all sides of a shadow that is set to match the dimensions of the overlay element. Offsets are applied via top and left margins (can be positive or negative).