Add jQuery User Interface Classes to Theme Styles - dummies

Add jQuery User Interface Classes to Theme Styles

By Andy Harris

Part of JavaScript & AJAX For Dummies Cheat Sheet

These CSS classes are defined in a jQuery UI theme. If you’re using jQuery UI, you can add any of these classes to your objects to add the theme styles.

Class Used on Description
ui-widget Outer container of widget Makes element look like a widget.
ui-widget-header Heading element Applies distinctive heading appearance.
ui-widget-content Widget Applies widget content style to element and children.
ui-state-default Clickable elements Displays standard (unclicked) state.
ui-state-hover Clickable elements Displays hover state.
ui-state-focus Clickable elements Display focus state when element has keyboard focus.
ui-state-active Clickable elements Display active state when mouse is clicked on element.
ui-state-highlight Any widget or element Specifies element is currently highlighted.
ui-state-error Any widget or element Specifies an element will contain an error or warning
ui-state-error text Text element Allows error highlighting without changing other elements
(mainly used in form validation).
ui-state-disabled Any widget or element Demonstrates that widget is currently disabled.
ui-corner-tl (etc)
Any widget or element Adds current corner size to element. Specify specific corners
with tl, tr, bl, br, top, bottom, left, right.
ui-widget-shadow Any widget Applies shadow effect to widget.