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 needed for common user interfaces and can be maintained with the jQuery UI ThemeRoller. Create your own UI components by using the jQuery UI CSS framework. You need to adopt shared markup conventions to facilitate code integration in the plugin community.

Framework classes

The following CSS classes are defined separately inui.core.cssandui.theme.csstwo files. These classes are designed for use on user interface elements to achieve visual consistency across the entire application, and components can be themed via the jQuery UI ThemeRoller.

Layout helpers

  • .ui-helper-hidden: Applies to elementsdisplay: none。
  • .ui-helper-hidden-accessible: Applies accessible hiding to elements (via absolute positioning).
  • .ui-helper-reset: Basic style reset for UI elements. Elements reset include, for example:padding、margin、text-decoration, list-style, and so on.
  • .ui-helper-clearfix: Applies float wrapping properties to parent elements.
  • .ui-helper-zfix: To<iframe>elements, apply the iframe "fix" CSS.

Widget containers

  • .ui-widget: Class applied to the outer container of all widgets. Applies the font and font size to the widget, and also applies the same font and a font size of 1em to child form elements, to address inheritance issues in Windows browsers.
  • .ui-widget-header: Class applied to the header container. Applies header container styles to the text, links, and icons of the element and its child elements.
  • .ui-widget-content: Class applied to the content container. Applies content container styles to the text, links, and icons of the element and its child elements. (Can be applied to the parent or sibling element of the header.)

Interaction states

  • .ui-state-default: Class applied to clickable button elements. Applies 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. Applies the "clickable hover" container style to the text, links, and icons of the element and its child elements.
  • .ui-state-focus: Class applied when the keyboard focuses on a clickable button element. Applies the "clickable hover" container style to the text, links, and icons of the element and its child elements.
  • .ui-state-active: Class applied when a clickable button element is clicked with the mouse. Applies the "clickable active" container style to the text, links, and icons of the element and its child elements.

Interaction Cues

  • .ui-state-highlight: Class applied to highlighted or selected elements. Applies the "highlight" container style to the text, links, and icons of the element and its child elements.
  • .ui-state-error: Class applied to error message container elements. 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 colors with no background. Can be used for form labels, and can also apply the error icon color to child icons.
  • .ui-state-disabled: Applies a dimmed opacity to disabled UI elements. This means adding an extra style to an element that already has a defined style.
  • .ui-priority-primary: Class applied to primary buttons. Applies bold text.
  • .ui-priority-secondary: Class applied to secondary buttons. Applies normal-weight text and a slight opacity to the element.

Icons

States and Images

  • .ui-icon: Basic class applied to icon elements. Sets the size to a 16px square, hides the inner text, and sets the background image for the sprite image in the "content" state.Note: .ui-iconThe class will get a different sprite background image depending on its parent container. For example,ui-state-defaultInside the container,ui-iconthe element will beui-state-defaultcolored according to the icon color of the class.

Icon Types

When declaring.ui-iconthe class, you can then declare a class that describes an icon type. In general, icon classes follow the syntax.ui-icon-{icon type}-{icon sub description}-{direction}。

For example, a triangle icon pointing to the right is shown as follows:.ui-icon-triangle-1-e

jQuery UI'sThemeRollerIn its preview section, it provides the full set of CSS framework icons. Hover the mouse over an icon to view the class name.

Other visual effects

Corner Radius Helpers

  • .ui-corner-tl: Applies a corner radius to the top-left corner of an element.
  • .ui-corner-tr: Applies a corner radius to the top-right corner of an element.
  • .ui-corner-bl: Applies a corner radius to the bottom-left corner of an element.
  • .ui-corner-br: Applies a corner radius to the bottom-right corner of an element.
  • .ui-corner-top: Applies a corner radius to the left and right corners on the top edge of an element.
  • .ui-corner-bottom: Applies a corner radius to the left and right corners on the bottom edge of an element.
  • .ui-corner-right: Applies a corner radius to the top and bottom corners on the right edge of an element.
  • .ui-corner-left: Applies a corner radius to the top and bottom corners on the left edge of an element.
  • .ui-corner-all: Applies a corner radius to all four corners of an element.

Overlay & Shadows

  • .ui-widget-overlay: Applies 100% width and height to the overlay screen, and sets the background color/texture and screen opacity.
  • .ui-widget-shadow: Class applied to the overlay, which sets the opacity, top/left offsets, and the "thickness" of the shadow. The thickness is applied by setting padding on all edges of the shadow. The offset is applied by setting the top margin and left margin (which can be positive or negative).
Other Extensions