在項目中經常會用到一些樣式什麼的，如果使用了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) (隱藏元素，適用於絕對位置的元素，直接裁剪為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)(陰影)
