• Choose a category
• All
• Classic-Fiction

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

Displays focus state when element has keyboard focus.

ui-state-active

Clickable elements

Displays active state when mouse is clicked on element.

ui-state-highlight

Any widget or element

Specifies that an element is currently highlighted.

ui-state-error

Any widget or element

Specifies that an element contains an error or warning message.

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 a widget is currently disabled.

ui-corner-all,ui-corner-tl (etc)

Any widget or element

Adds current corner size to an element. Specify specific corners with tl, tr, bl, br, top, bottom, left, right.

ui-widget-shadow

Any widget

Applies shadow effect to a widget.

A few other classes are defined in UI themes, but these are the most commonly used. Refer to the current jQuery UI documentation for more details.

Adding an icon

Note the small start that appears inside the resizeMe element in Figure 4-6. This element is an example of a jQuery UI icon. All jQuery themes support a standard set of icons, which are small (16px square) images. The icon set includes standard icons for arrows as well as images commonly used in menus and toolbars (save and load, new file, and so on). Some jQuery UI elements use icons automatically, but you can also add them directly. To use an icon in your programs, follow these steps:

1. Include a jQuery UI theme.

The icons are part of the theme package. Include the CSS style sheet that corresponds with the theme (as you’ve already done in this example).

2. Be sure that the images are accessible.

When you download a theme package, it includes a directory of images. The images included in this directory are used to create custom backgrounds as well as icons. The CSS file expects a directory called images to be in the same directory as the CSS. This directory should contain several images that begin with ui-icons. These images contain all the necessary icons. If the icon image files are not available, the icons will not display. (Of course, you can edit these images in your graphics tool to customize them if you want.)

3. Create a span where you want the icon to appear.

Place an empty span element wherever you want the icon to appear in the HTML. You can place the span directly in the HTML if you want, or you can add it through jQuery. I prefer to add UI elements through jQuery to keep the HTML as pristine as possible.

4. Attach the ui-icon class to the span.

This tells jQuery to treat the span as an icon. The contents of the span will be hidden, and the span will be resized to hold a 16-pixel square icon image.

5. Attach a second class to identify the specific icon.

Look at the themeRoller page to see the available icons. When you hover over an icon on this page, you can see the class name associated with the icon.

You can add the code directly in your HTML like this:

This is my text

Or, you can use jQuery to add the appropriate code to your element:

$(“#myPara”).append(‘’);

Dragging, Dropping, and Calling Back

JQuery elements look good, but they also have interesting functionality. Most jQuery UI objects have the ability to respond to specialized events. As an example, look over the dragDrop.html page shown in Figure 4-7.

When you drop an element onto the target, the color and content of the target change, as shown in Figure 4-8.

Figure 4-7: The page has a group of draggable elements and a target.

Figure 4-8: The target knows when something has been dropped onto it.

Another interesting