jquery ui css framework.doc

jQuery UI CSS Framework 文档 翻译jQuery UI CSS FrameworkjQuery UI 包含一个强大的 CSS 框架来帮助我们设计 jQuery 小部件，这个框架包含了许多普通用户经常会用到的 class，并且还可以利用 jQuery UI 主题编辑器来方便地修改主题。当你在使用 jQuery UI CSS 框架来构建你网站的 UI 时，你必须要遵守一些约定，这样才能更好地使用 jQuery UI CSS 框架。Framework Classes一下的几个 class 分别在 ui.core.css 和 ui.theme.css 文件中，你可以直接下载一个完整的 css 文件，也可以几个部分。这些类保证了构建 UI 的一致性和快速性，而它们的外观主要取决于你的主题样式。Layout Helpers.ui-helper-hidden: 给元素设置 display: none 属性。.ui-helper-hidden-accessible: 是元素不可访问 (利用绝对定位使其在页面外部).ui-helper-reset: 基础重置 class， 重置： padding, margins, text-decoration, list-style, 等属性.ui-helper-clearfix: 给元素设置 clear: both 属性.ui-helper-zfix: 当元素需要覆盖在最上面是设置此属性Widget Containers.ui-widget: 这个 class 会被用在外部容器上，它会给内部的部件统一字体、字号。这个主要是为了解决浏览器继承问题的.ui-widget-header: 这个 class 会被用在标题容器上，同样，它也主要是给容器内部的成员统一一些属性的.ui-widget-content: 这个 class 会被用在内容容器上，作用同上Interaction States.ui-state-default: 这个 class 会被用在类似于 button 的小部件上，用来显示这个部件在默认状态下的样式.ui-state-hover: 用法同上，用来设置鼠标悬停时的样式.ui-state-focus: 用法同上，用来设置得到焦点时的样式.ui-state-active: 用法同上，用来设置鼠标按下时的样式Interaction Cues.ui-state-highlight: 设置高亮样式.ui-state-error: 设置错误样式.ui-state-error-text: 设置文本错误样式.ui-state-disabled: 设置禁用样式.ui-priority-primary: 设置高优先级样式.ui-priority-secondary: 设置低优先级样式IconsStates and images.ui-icon: 图标元素的基础 class，它会设置一个 16px 大小的正方形，隐藏内部文字，把背景设置成当前状态的背景（上一个部分分别有四种状态，这四种状态下的图标背景是不同的）Icon types当你给 a 设置了 “.ui-icon” class 后，你可以再设置一个描述性的 class，格式如下： .ui-icon-icon type-icon sub description-direction.例如一个单一的三角形图标： .ui-icon-triangle-1-e你可以在jQuery UI 主题编辑器页面看到这些图标，查看一下它们的 class 就知道怎么用了Misc VisualsCorner Radius helpers.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: 设置所有圆角Overlay & Shadow.ui-widget-overlay: 设置一个小部件全屏的遮罩层.ui-widget-shadow: 设置一个小部件的阴影在项目中经常会用到一些样式什么的，如果使用了jQuery UI那么很多的图标，样式什么的，就可以尽量使用jQuery UI里面已经定义好了的，在此就对jQuery UI中的css做写了下注释，提供自己准备利用jQuery UI的样式来写控件的朋友们，自己也顺带做下记录。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) (隐藏元素，适用于绝对定位的元素，直接裁剪为11px的大小) .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-defaults 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 typesAfter declaring a .ui-icon class, you can follow up with a second class describing the type of icon youd 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-ejQuery UIsThemeRollerprovides 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 c