jQuery UI CSS Framework API


jQuery UI CSS Framework

jQuery UI includes a powerful CSS framework designed for creating custom jQuery widgets. The framework contains the classes required for a common user interface and can be maintained using jQuery UI ThemeRoller. Create your own UI components by using the jQuery UI CSS framework. You need to adopt a shared markup convention to facilitate code integration within the plugin community.

Framework class

The following CSS classes are defined in according to whether the style is fixed and structured, or whether it can be themed (color, font, background, etc.) In two files ui.core.css and ui.theme.css. These classes are designed to be used with user interface elements in order to achieve visual consistency throughout the application, and components can be themed through the jQuery UI ThemeRoller.

Layout Helper

  • .ui-helper-hidden: Apply display: none to the element.

  • .ui-helper-hidden-accessible: Applies access hiding (via page absolute positioning) to an element.

  • .ui-helper-reset: Basic style reset for UI elements. Reset elements such as: padding, margin, text-decoration, list-style, etc.

  • .ui-helper-clearfix: Applies the floating wrapper attribute to the parent element.

  • .ui-helper-zfix: Applies iframe "fix" CSS to <iframe> elements.

Widget container

  • .ui-widget: Class applied to the outer container of all widgets. Apply a font and font size to the widget, but also apply the same font and 1em font size to self-form elements to account for inheritance issues in Windows browsers.

  • .ui-widget-header: Class applied to the header container. Applies title container styles to the text, links, and icons of the element and its child elements.

  • .ui-widget-content: Class applied to the content container. Apply content container styles to the text, links, and icons of the element and its child elements. (Can be applied to the parent element or sibling elements of the title)

Interaction state

  • .ui-state-default: Class applied to clickable button elements. Apply the "clickable default" container style to the text, links, and icons of the element and its child elements.

  • .ui-state-hover: Class applied when the mouse hovers over a clickable button element. Apply the "clickable hover" container style to the text, links, and icons of the element and its child elements.

  • .ui-state-focus: Class applied when keyboard focus is on a clickable button element. Apply the "clickable hover" container style to the text, links, and icons of the element and its child elements.

  • .ui-state-active: Class applied when the mouse clicks on the clickable button element. Apply the "clickable active" container style to the text, links, and icons of the element and its child elements.

Interactive prompts Cues

  • .ui-state-highlight: Class applied to highlighted or selected elements. Apply the "highlight" container style to the text, links, and icons of the element and its child elements.

  • .ui-state-error: Class applied to the error message container element. Applies the "error" container style to the text, links, and icons of the element and its child elements.

  • .ui-state-error-text: Class applied to error text color with only no background. Can be used for form labels, and can also apply error icon colors to sub-icons.

  • .ui-state-disabled: Applies a dim opacity to disabled UI elements. Means to add additional styles to an already defined style element.

  • .ui-priority-primary: Class applied to the first priority button. Apply bold text.

  • .ui-priority-secondary: Class applied to the second priority button. Apply normal weight text and slight transparency to the element.

Icon

State and image

  • .ui-icon: Applied to the icon element Basic Class. Set the size to a 16px square, hide the inner text, and set a background image for the sprite image in the "content" state. Note: .ui-icon class will get a different sprite background image based on its parent container. For example, a ui-icon element inside a ui-state-default container will be colored based on the icon color of ui-state-default.

Icon type

After declaring the .ui-icon class, you can then declare a class of the second speed icon type. Normally, icon classes follow the syntax .ui-icon-{icon type}-{icon sub description}-{direction}.

For example, a triangle icon pointing to the right, like this: .ui-icon-triangle-1-e

jQuery UI’s ThemeRoller Provides a full set of CSS frame icons in its preview column. Hover your mouse over the icon to see the class name.

Other visual effects

Corner Radius Assistant

  • .ui-corner-tl: Applies to the upper left corner of the element Corner radius.

  • .ui-corner-tr: Applies a corner radius to the upper right corner of the element.

  • .ui-corner-bl: Applies a corner radius to the lower left corner of the element.

  • .ui-corner-br: Applies a corner radius to the lower right corner of the element.

  • .ui-corner-top: Apply a corner radius to the left and right corners of the element.

  • .ui-corner-bottom: Apply a corner radius to the left and right corners of the element's bottom.

  • .ui-corner-right: Applies a corner radius to the upper and lower corners on the right side of the element.

  • .ui-corner-left: Applies a corner radius to the upper and lower corners of the left side of the element.

  • .ui-corner-all: Applies a corner radius to all four corners of the element.

Overlay & Shadow

  • .ui-widget-overlay: Apply 100% width and height to the overlay screen, Set background color/texture and screen opacity simultaneously.

  • .ui-widget-shadow: Set the opacity, upper offset/left offset, and shadow "thickness" for the overlay applied Class . Thickness is applied by setting padding on all sides of the shadow. The offset is applied by setting the top margin and left margin (can be a positive or negative number).