The jQuery UI CSS Framework(中文说明)

在项目中经常会用到一些样式什么的，如果使用了jQuery UI那么很多的图标，样式什么的，就可以尽量使用jQuery UI里面已经定义好了的，在此就对jQuery UI中的css做写了下注释，提供自己准备利用jQuery UI的样式来写控件的朋友们，自己也顺带做下记录。 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css   

Layout Helpers(布局帮助)

• .ui-helper-hidden: Applies display: none to elements. (隐藏元素，适用于display:none可以隐藏的元素)
• .ui-helper-hidden-accessible: Applies accessible hiding to elements (via abs positioning off the page) (隐藏元素，适用于绝对定位的元素，直接裁剪为1×1px的大小)
• .ui-helper-reset: A basic style reset for UI elements. Resets things such as padding, margins, text-decoration, list-style, etc. (进行复位)
• .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: Class to be applied on outer container of all widgets. 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: 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: 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: 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: 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.(不同的状态是不同的图片)

有如下几种：

1.ui-icon (默认图标)
2.ui-widget-content .ui-icon (容器中内容图标)
3.ui-widget-header .ui-icon (容器中标题图标)
4.ui-state-default .ui-icon (默认状态图标)
5.ui-state-hover .ui-icon, .ui-state-focus .ui-icon (鼠标移动到上方时或获得焦点时图标)
6.ui-state-active .ui-icon (激活时图标)
7.ui-state-highlight .ui-icon (高亮时图标)
8.ui-state-error .ui-icon, .ui-state-error-text .ui-icon (错误时图标)

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)(阴影)