在项目中经常会用到一些样式什么的,如果使用了jQuery UI那么很多的图标,样式什么的,就可以尽量使用jQueryUI里面已经定义好了的,在此就对jQuery UI中的css做写了下注释,提供自己准备利用jQueryUI的样式来写控件的朋友们,自己也顺带做下记录。
Layout Helpers(布局帮助).ui-helper-hidden: Applies display: none toelements. (隐藏元素,适用于display:none可以隐藏的元素)
.ui-helper-hidden-accessible: Appliesaccessible hiding to elements (via abs positioning off the page)(隐藏元素,适用于绝对定位的元素,直接裁剪为1×1px的大小)
.ui-helper-reset: A basic style reset for UIelements. Resets things such as padding, margins, text-decoration,list-style, etc. (进行复位)
.ui-helper-clearfix: Applies float wrappingproperties to parent elements
.ui-helper-zfix: Applies iframe "fix" css toiframe elements when needed in overlays.
Widget Containers(控件容器).ui-widget: Class to be applied on outercontainer of all widgets. Applies font family and font size towidget. Also applies same family and 1em font size to child formelements specifically, to combat inheritance issues in Winbrowsers. (容器,主要设置字体和字体大小)
.ui-widget-header: Class to be applied toheader containers. Applies header container styles to an elementand its child text, links, and icons. (容器标题区)
.ui-widget-content: Class to be applied tocontent containers. Applies content container styles to an elementand its child text, links, and icons. (can be applied to parent orsibling of header)(容器内容区)
Interaction States(交互状态).ui-state-default: Class to be applied toclickable button-like elements. Applies "clickable default"container styles to an element and its child text, links, andicons. (默认状态)
.ui-state-hover: Class to be applied onmou ver to clickable button-like elements. Applies "clickablehover" container styles to an element and its child text, links,and icons. (鼠标移到元素上时的状态)
.ui-state-focus: Class to be applied onkeyboard focus to clickable button-like elements. Applies"clickable hover" container styles to an element and its childtext, links, and icons. (元素获得焦点时的状态)
.ui-state-active: Class to be applied onmousedown to clickable button-like elements. Applies "clickableactive" container styles to an element and its child text, links,and icons.(激活(在鼠标点击与释放之间发生的事件)的元素的状态)
Interaction Cues(交互提示).ui-state-highlight: Class to be applied tohighlighted or selected elements. Applies "highlight" containerstyles to an element and its child text, links, and icons.(高亮状态)
.ui-state-error: Class to be applied to errormessaging container elements. Applies "error" container styles toan element and its child text, links, and icons. (错误状态)
.ui-state-error-text: An additional class thatapplies just the error text color without background. Can be usedon form labels for instance. Also applies error icon color to childicons. (错误状态,不包括图标)
.ui-state-disabled: Applies a dimmed opacity todisabled UI elements. Meant to be added in addition to analready-styled element. (禁用的状态)
.ui-priority-primary: Class to be applied to apriority-1 button in situations where button hierarchy is needed.Applies bold text. (首要终点)
.ui-priority-secondary: Class to be applied toa priority-2 button in situations where button hierarchy is needed.Applies normal weight text and slight transparency toelement.(次要重点)
Icons(图标) States and images(状态和图片).ui-icon: Base class to be applied to an icon element. Setsdimensions to 16px square block, hides inner text, sets backgroundimage to "content" state sprite image. Note: .ui-icon class will be given a different sprite background imagedepending on its parent container. For example, a ui-icon elementwithin a ui-state-default container will get colored according tothe 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(错误时图标)
After declaring a ".ui-icon" class, you can follow up with asecond class describing the type of icon you'd like. Icon classesgenerally follow a syntax of .ui-icon-{icon type}-{icon subdescription}-{direction}.
For example, a single triangle icon pointing to the right lookslike this: .ui-icon-triangle-1-e
jQuery UI's ThemeRoller provides the full set of CSS frameworkicons in its preview column. Hover over them to see the classname.
Misc Visuals(杂项) Corner Radius helpers(圆角帮助).ui-corner-tl: Applies corner-radius to topleft corner of element. (左上角圆角)
.ui-corner-tr: Applies corner-radius to topright corner of element. (右上角圆角)
.ui-corner-bl: Applies corner-radius to bottomleft corner of element. (左下角圆角)
.ui-corner-br: Applies corner-radius to bottomright corner of element. (右下角圆角)
.ui-corner-top: Applies corner-radius to bothtop corners of element. (左上和右上角圆角)
.ui-corner-bottom: Applies corner-radius toboth bottom corners of element. (左下和右下角圆角)
.ui-corner-right: Applies corner-radius to bothright corners of element. (右上和右下角圆角)
.ui-corner-left: Applies corner-radius to bothleft corners of element. (左上和左下角圆角)
.ui-corner-all: Applies corner-radius to all 4corners of element.(四个角全部圆角)
Overlay & Shadow(遮罩层和阴影).ui-widget-overlay: Applies 100% wxh dimensionsto an overlay screen, along with background color/texture, andscreen opacity. (遮罩层)
.ui-widget-shadow: Class to be applied tooverlay 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 ashadow that is set to match the dimensions of the overlay element.Offsets are applied via top and left margins (can be positive ornegative)(阴影)