ThejQueryUICSSFramework Chinese description

Some styles are often used in projects. If there are so many icons and styles in jQueryUI, you can try to use the ones already defined in jQueryUI, I wrote a comment on the css in jQueryUI, and provided my friends who are ready to use the jQueryUI style to write controls. I also recorded them. LayoutHe

Some styles are often used in projects. If there are so many icons and styles in jQuery UI, you can try to use the ones already defined in jQueryUI, in this case, I wrote a comment on css in jQuery UI, and provided my friends who are ready to use the jQueryUI style to write controls. I also recorded them.

Layout Helpers (Layout help)

. Ui-helper-hidden:Applies display: none toelements. (hidden element, applicable to elements that can be hidden by display: none)

. Ui-helper-hidden-accessible:Appliesaccessible hiding to elements (via abs positioning off the page) (hidden element, applicable to absolute positioning elements, cropped to a size of 1 × 1px)

. Ui-helper-reset:A basic style reset for UIelements. Resets things such as padding, margins, text-decoration, list-style, etc. (reset)

. Ui-helper-clearfix:Applies float wrappingproperties to parent elements

. Ui-helper-zfix:Applies iframe "fix" css toiframe elements when needed in overlays.

Widget Containers (control container)

. 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. (container, mainly set the font and font size)

. Ui-widget-header: Class to be applied toheader containers. Applies header container styles to an elementand its child text, links, and icons. (container title Area)

. 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) (container content area)

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. (default status)

. Ui-state-hover:Class to be applied onmouSeoVer to clickable button-like elements. Applies "clickablehover" container styles to an element and its child text, links, and icons. (The State when you move the cursor over an element)

. 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. (the State when the element gets the focus)

. 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. (activation (events that occur between mouse clicks and release) of the element status)

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. (highlighted)

. Ui-state-error:Class to be applied to errormessaging container elements. Applies "error" container styles toan element and its child text, links, and icons. (error status)

. 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. (error status, excluding icons)

. Ui-state-disabled:Applies a dimmed opacity todisabled UI elements. Meant to be added in addition to analready-styled element. (disabled)

. Ui-priority-primary:Class to be applied to specified ority-1 button in situations where button hierarchy is needed. Applies bold text. (primary endpoint)

. 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. (secondary focus)

Icons (icon) States and images (Status and image)

. 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. (The status is different)

There are several types:

1. ui-icon (default icon)
2. ui-widget-content. ui-icon (content icon in container)
3. ui-widget-header. ui-icon (the title icon in the container)
4. ui-state-default. ui-icon (default state icon)
5. ui-state-hover. ui-icon,. ui-state-focus. ui-icon (the icon when you move the mouse over or get the focus)
6. ui-state-active. ui-icon (icon Upon activation)
7. ui-state-highlight. ui-icon (when highlighted)
8. ui-state-error. ui-icon,. ui-state-error-text. ui-icon (when an error occurs)

Icon types

After declaring ". ui-icon "class, you can follow up with asecond class describing the type of icon you 'd like. icon classesgenerally follow a syntax. 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 events ALS (Miscellaneous) Corner Radius helpers (Corner help)

. Ui-corner-tl:Applies corner-radius to topleft corner of element. (rounded corner in the upper left corner)

. Ui-corner-tr:Applies corner-radius to topright corner of element. (rounded corner in the upper right corner)

. Ui-corner-bl:Applies corner-radius to bottomleft corner of element. (rounded corner in the lower left corner)

. Ui-corner-br:Applies corner-radius to bottomright corner of element. (rounded corner in the lower right corner)

. Ui-corner-top:Applies corner-radius to bothtop corners of element. (rounded corner on the left and top right corner)

. Ui-corner-bottom:Applies corner-radius toboth bottom corners of element. (bottom left and bottom right corner)

. Ui-corner-right:Applies corner-radius to bothright corners of element. (rounded corner on the right and bottom right)

. Ui-corner-left:Applies corner-radius to bothleft corners of element. (rounded corner on the left and lower left corner)

. Ui-corner-all:Applies corner-radius to all 4 corners of element. (all rounded corners of Four corners)

Overlay & Shadow (mask layer and Shadow)

. Ui-widget-overlay:Applies 100% wxh dimensionsto an overlay screen, along with background color/texture, andscreen opacity. (mask layer)

. 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) (Shadow)