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 jquery UI, here, I wrote a comment on CSS in jquery UI, and provided my friends who are ready to use jquery UI styles to write controls. I also recorded them.
Layout helpers (layout help)
- . UI-helper-hidden:Applies display: none to elements. (hidden element, applicable to elements that can be hidden by display: None)
- . UI-helper-hidden-accessible:Applies accessible hiding to elements (via ABS positioning off the page) (hide elements, applicable to absolute positioning elements, crop directly to a size of 1 × 1px)
- . UI-helper-Reset:A basic style reset for UI elements. resets things such as padding, margins, text-decoration, list-style, etc. (reset)
- . 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 (control container)
- . 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. (container, mainly set the font and font size)
- . UI-widget-Header: Class to be applied to header containers. applies header container styles to an element and its Child text, links, and icons. (container title Area)
- . 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) (container content area)
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. (default status)
- . 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. (The status when you move the cursor over the element)
- . 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. (The status when the element gets the focus)
- . 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. (activation (events that occur between mouse clicks and release) of the element status)
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. (highlighted)
- . 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. (error status)
- . 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. (error status, excluding icons)
- . UI-state-Disabled:Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element. (disabled)
- . UI-priority-Primary:Class to be applied to a priority-1 button in situations where button hierarchy is needed. applies bold text. (primary endpoint)
- . 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. (secondary focus)
Icons (icon)
States and images (Status and image)
- . 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. (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 a second class describing the type of icon you 'd like. icon classes generally follow a syntax. 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 events ALS (Miscellaneous)
Corner radius helpers (Corner help)
- . UI-corner-Tl:Applies corner-radius to top left corner of element. (rounded corner in the upper left corner)
- . UI-corner-TR:Applies corner-radius to top right corner of element. (rounded corner in the upper right corner)
- . UI-corner-Bl:Applies corner-radius to bottom left corner of element. (rounded corner in the lower left corner)
- . UI-corner-Br:Applies corner-radius to bottom right corner of element. (rounded corner in the lower right corner)
- . UI-corner-top:Applies corner-radius to both top corners of element. (rounded corner on the left and top right corner)
- . UI-corner-bottom:Applies corner-radius to both bottom corners of element. (bottom left and bottom right corner)
- . UI-corner-right:Applies corner-radius to both right corners of element. (rounded corner on the right and bottom right)
- . UI-corner-left:Applies corner-radius to both left 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 dimensions to an overlay screen, along with background color/texture, and screen opacity. (mask layer)
- . 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) (Shadow)
