Latest web development tutorials

jQuery UI CSS framework API

jQuery UI CSS framework

jQuery UI includes a powerful CSS framework, in order to create custom jQuery widgets and design. Frame contains the required common user interface classes, and can be used jQuery UI ThemeRoller maintenance. By creating your own UI components using jQuery UI CSS framework. You need to use Sharemark Convention, in order to plug in the code community integration.

Framework classes

Are the following CSS class styles are fixed according to the structured, or whether it is themable (colors, fonts, backgrounds, etc.), are defined in ui.core.css and ui.theme.css two files. These classes are designed for user interface elements in order to achieve visual consistency throughout the application, by jQuery UI ThemeRoller of components theming.

Layout Helper

  • .ui-helper-hidden : the elements of the application display: none .
  • .ui-helper-hidden-accessible : the elements of the application to access the hidden (absolute positioning by page).
  • .ui-helper-reset : The basic style UI elements reset. Reset elements such as: padding , margin , text-decoration , List-style, and so on.
  • .ui-helper-clearfix : application of the parent element float packaging properties.
  • .ui-helper-zfix : for <iframe> element apply iframe "fix" CSS.

Widget container

  • .ui-widget : Class on the outside of the container to apply all of the widgets. Widget application for the font and font size, but also on the same font from the application form elements and 1em font size to cope with Windows Browser succession.
  • .ui-widget-header : title container application Class. Of the element and its children's text, links, icons apply heading style container.
  • .ui-widget-content : Class contents of container applications. Of the element and its children's text, links, icons application content container style. (Can be applied to the parent element title or siblings)

Interactive state

  • .ui-state-default : Click on the button element can be applied Class. Of the element and its children's text, links, icons application "clickable default" style container.
  • .ui-state-hover : mouse suspended when applied in a clickable button element when on Class. Of the element and its children's text, links, icons application "clickable hover" container style.
  • .ui-state-focus : Application Class when the keyboard focus in a clickable button element. Of the element and its children's text, links, icons application "clickable hover" container style.
  • .ui-state-active : Application Class when a mouse click can click on the button element. Of the element and its children's text, links, icons application "clickable active" container style.

Interactive prompt Cues

  • .ui-state-highlight : to highlight or select the Class element applications. Of the element and its children's text, links, icons application "highlight" container style.
  • .ui-state-error : error message container element applications Class. Of the element and its children's text, links, icons application "error" container style.
  • .ui-state-error-text : not only against the background color of the application error text Class. It can be used to form labels to be sub-color application icon error icon.
  • .ui-state-disabled : to disable UI elements apply a dim opacity. It means that the elements of an already defined style to add extra style.
  • .ui-priority-primary : Class of first priority button applications. Application of bold text.
  • .ui-priority-secondary : Class of second priority button applications. Application of normal weight text elements apply slight transparency.

icon

Status and image

  • .ui-icon : Basic Class of the icon element of the application. Set the size of 16px squares, hidden inside the text of the "content" status sprite set the background image. Note: .ui-icon , class will get a different background image sprite based on its parent container. For example, ui-state-default container ui-icon element according ui-state-default coloring icon color.

Icon Type

In a statement .ui-icon after class, then you can declare a second speed of the type of icon of class. Under normal circumstances, the icon class follows the syntax .ui-icon-{icon type}-{icon sub description}-{direction} .

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

jQuery UI's ThemeRoller in its preview column provides a full range of CSS framework icon. Hover over the icon to view the class name.

Other visuals

Radius assistant

  • .ui-corner-tl : top-left corner of the application element radius.
  • .ui-corner-tr : the upper right corner of the application element radius.
  • .ui-corner-bl : lower left corner of the application element radius.
  • .ui-corner-br : the lower right corner of the application element radius.
  • .ui-corner-top : upper left corner of the application element radius.
  • .ui-corner-bottom : the elements of the lower left corner of the application radius.
  • .ui-corner-right : diagonal elements of the upper and lower right of the application radius.
  • .ui-corner-left : diagonal elements of the upper and lower left of the application radius.
  • .ui-corner-all : all four corners of application radius of the element.

Cover & Shadows

  • .ui-widget-overlay : to cover 100% of the screen width and height of the application, and set the background color / texture and opacity of the screen.
  • .ui-widget-shadow : Class of application coverage, set the opacity, the Offset / Left Offset, and Shadow "thickness." The thickness is by all sides in the shadow set margins (padding) were applied. Offset by setting the margin (margin) and the left margin (margin) were applied (can be positive, it can be negative).