YouTip

Below is a list of the class names used by jQuery UI. These classes are used to create visual consistency across applications and allow components to be themed via the (http://jqueryui.com/themeroller/). The following CSS classes are defined in two files, `ui.core.css` and `ui.theme.css`, depending on whether the style is fixed/structured or themeable (colors, fonts, backgrounds, etc.). ### Layout Helpers * `.ui-helper-hidden`: Applies `display: none` to the element. * `.ui-helper-hidden-accessible`: Applies accessible hiding to the element (via absolute positioning off-screen). * `.ui-helper-reset`: Basic style reset for UI elements. Resets elements like `padding`, `margin`, `text-decoration`, `list-style`, etc. * `.ui-helper-clearfix`: Applies float wrapping properties to a parent element. * `.ui-helper-zfix`: Applies iframe "fix" CSS to `` elements. * `.ui-front`: Applies z-index to manage the stacking of multiple widgets on screen. For more details, see the (#) page. ### Widget Containers * `.ui-widget`: The class applied to the outer container of all widgets. Applies font and font size to the widget, and also applies the same font and a font size of 1em to form elements to address inheritance issues in Windows browsers. * `.ui-widget-header`: The class applied to header containers. Applies header container styles to the text, links, and icons of the element and its children. * `.ui-widget-content`: The class applied to content containers. Applies content container styles to the text, links, and icons of the element and its children. (Can be applied to a parent or sibling of the header.) ### Interaction States * `.ui-state-default`: The class applied to clickable button elements. Applies "clickable default" container styles to the text, links, and icons of the element and its children. * `.ui-state-hover`: The class applied when the mouse is hovered over a clickable button element. Applies "clickable hover" container styles to the text, links, and icons of the element and its children. * `.ui-state-focus`: The class applied when a clickable button element receives keyboard focus. Applies "clickable hover" container styles to the text, links, and icons of the element and its children. * `.ui-state-active`: The class applied when a clickable button element is clicked. Applies "clickable active" container styles to the text, links, and icons of the element and its children. ### Interaction Cues * `.ui-state-highlight`: The class applied to highlighted or selected elements. Applies "highlight" container styles to the text, links, and icons of the element and its children. * `.ui-state-error`: The class applied to error message container elements. Applies "error" container styles to the text, links, and icons of the element and its children. * `.ui-state-error-text`: The class applied for error text color without a background. Can be used for form labels, and also applies error icon color to child icons. * `.ui-state-disabled`: Applies a dimmed opacity to disabled UI elements. Implies adding extra styles to an already styled element. * `.ui-priority-primary`: The class applied to primary priority buttons. Applies bold text. * `.ui-priority-secondary`: The class applied to secondary priority buttons. Applies normal weight text and a slight opacity to the element. ### Icons #### States and Images * `.ui-icon`: The base class applied to icon elements. Sets the size to a 16px square, hides inner text, and sets a background image for the sprite image of the "content" state. **Note:** _The `.ui-icon` class will receive a different sprite background image based on its parent container. For example, a `ui-icon` element within a `ui-state-default` container will be colored according to the `ui-state-default` icon color._ #### Icon Types After declaring the `.ui-icon` class, you can then declare a class describing the icon type. Typically, icon classes follow the syntax `.ui-icon-{icon type}-{icon sub description}-{direction}`. For example, a triangle pointing to the right would be: `.ui-icon-triangle-1-e` jQuery UI's (http://jqueryui.com/themeroller) provides a full set of CSS framework icons in its preview pane. Hover over an icon to see the class name. ### Other Visual Effects #### Corner Radius Helpers * `.ui-corner-tl`: Applies a rounded corner to the top-left corner of an element. * `.ui-corner-tr`: Applies a rounded corner to the top-right corner of an element. * `.ui-corner-bl`: Applies a rounded corner to the bottom-left corner of an element. * `.ui-corner-br`: Applies a rounded corner to the bottom-right corner of an element. * `.ui-corner-top`: Applies a rounded corner to both top corners of an element. * `.ui-corner-bottom`: Applies a rounded corner to both bottom corners of an element. * `.ui-corner-right`: Applies a rounded corner to both right corners of an element. * `.ui-corner-left`: Applies a rounded corner to both left corners of an element. * `.ui-corner-all`: Applies a rounded corner to all four corners of an element. #### Overlays & Shadows * `.ui-widget-overlay`: Applies a 100% width and height overlay to the screen, setting a background color/texture and screen opacity. * `.ui-widget-shadow`: The class applied to overlays, setting opacity, top/left offsets, and the "thickness" of the shadow. The thickness is applied by setting padding on all sides of the shadow. The offset is applied by setting top and left margins (which can be positive or negative).