jQuery UI CSS Framework API

jQuery UI CSS Framework API

jQuery UI CSS framework

The CSS framework of the jQuery UI is powerful and is designed to create custom jQuery widgets. T he framework includes a number of CSS classes that are appropriate for most user interface needs and can be maintained using jQuery UI ThemeRoller. C reate your own UI components by using the jQuery UI CSS framework. You need to adopt a shared tag convention for code integration in the plug-in community.

The framework class

The following CSS classes are defined in ui.core.css files, depending on whether the style is fixed or topicable.css ui.theme.css These classes are designed for use with user interface elements for visual consistency throughout the application, and components can be thematicized through jQuery UI ThemeRoller.

Layout assistant

• .ui-helper-hidden Apply display: none
• .ui-helper-hidden-accessible Apply access to elements to hide (absolutely positioned through the page).
• .ui-helper-reset Basic style reset of UI elements. Reset elements such as padding text-decoration list-style, and so on. margin
• .ui-helper-clearfix Apply floating wrapper properties to the parent element.
• .ui-helper-zfix <iframe> "fix" CSS to the elements.

Widget container

• .ui-widget Class applied to external containers for all widgets. Apply fonts and font sizes to widgets, as well as the same font and 1em font sizes to self-form elements to address inheritance issues in Windows browsers.
• .ui-widget-header Class applied to the title container. Apply title container styles to text, links, and icons of elements and their children.
• .ui-widget-content Class for content container applications. A pply content container styles to text, links, and icons of elements and their children. (Parent or peer element that can be applied to the title)

The interactive state

• .ui-state-default Class applied to clickable button elements. Apply a "clickable default" container style to the text, links, and icons of an element and its children.
• .ui-state-hover Class applied when the mouse hovers over a clickable button element. Apply a "clickable hover" container style to the text, links, and icons of an element and its children.
• .ui-state-focus Class applied when the keyboard focuses on clickable button elements. Apply a "clickable hover" container style to the text, links, and icons of an element and its children.
• .ui-state-active Class applied when the mouse clicks on a clickable button element. Apply a "clickable active" container style to the text, links, and icons of an element and its children.

Interactive tip Cues

• .ui-state-highlight applied to highlighted or selected elements. Apply a "highlight" container style to the text, links, and icons of an element and its children.
• .ui-state-error Class applied to the error message container element. Apply an "error" container style to the text, links, and icons of an element and its children.
• .ui-state-error-text that applies to error text colors with no background. It can be used for form labels, or you can apply error icon colors to sub-icons.
• .ui-state-disabled Apply a dim opacity to disabled UI elements. This means adding an additional style to an element that already has a style defined.
• .ui-priority-primary Class applied to the first priority button. Apply bold text.
• .ui-priority-secondary Class applied to the second priority button. Apply normally thick text and slight transparency to elements.

Icon

Status and image

• .ui-icon Basic Class for icon elements. S et the size to 16px squares, hide the internal text, and set the background image for the Elf image in the "content" state. ote: .ui-icon class will get a different elf background image based on its parent container. F or example, ui-state-default ui-icon is colored according to the icon color of the ui-state-default

The type of icon

After .ui-icon class, you can then declare a class of the second speed icon type. Typically, the icon class .ui-icon-{icon type}-{icon sub description}-{direction}

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

ThemeRoller of jQuery UI provides a full set of CSS frame icons in its preview column. Hover over the icon to see the class name.

Other visual effects

Fillet Radius Assistant

• .ui-corner-tl a fillet radius to the upper-left corner of an element.
• .ui-corner-tr Apply a fillet radius to the upper right corner of the element.
• .ui-corner-bl a fillet radius to the lower-left corner of an element.
• .ui-corner-br a fillet radius to the lower right corner of an element.
• .ui-corner-top a fillet radius to the left and right corners above the element.
• .ui-corner-bottom a fillet radius to the left and right corners between the lower and left corners of an element.
• .ui-corner-right radius to the upper and lower corners to the right of the element.
• .ui-corner-left radius to the upper and lower corners to the left of the element.
• .ui-corner-all a fillet radius to all four corners of an element.

Overwriting and shadowing

• .ui-widget-overlay Apply 100% width and height to the overlay screen while setting the background color/texture and screen opacity.
• .ui-widget-shadow For the Class of the overlay app, opacity, upper/left offset, and the "thickness" of the shadow are set. T he thickness is applied by setting padding on all sides of the shadow. Offsets are applied by setting the top margin (margin) and the left margin (10 positive or negative).