• Choose a category
• All
• Classic-Fiction

$(init);

function init(){

$(“#resizeMe”).resizable();

themify();

} // end init

1. Begin with an initialization function.

Like all good jQuery code, this example begins with standard initialization.

2. Make an element resizable.

Identify the resizeMe div as a jQuery node, and use the resizable() method to make it resizable. That’s all there is to it.

3. Call a second function to add theming to the elements.

While the resizable method doesn’t require use of jQuery themes, the themes do improve the look of the element.

Adding themes to your elements

The jQuery theme tool makes it quite easy to decorate your elements through CSS. The great thing about jQuery themes is that they are semantic, that is, you specify the general purpose of the element and then let the theme apply the appropriate specific CSS. You can use the themeRoller application to easily create new themes or modify existing ones. In this way, you can create a very sophisticated look and feel for your site and write very little CSS on your own. It’s a very powerful mechanism.

Many of the jQuery interface elements (such as the accordion and tab tools described elsewhere in this chapter) automatically use the current CSS theme. Of course you can also apply them to any of your own elements to get a consistent look.

Themes are simply CSS classes. To apply a CSS theme to an element, you can just add a special class to the object.

For example, you can make a paragraph look like the current definition of the ui-widget by adding this code to it:

Of course, adding classes into the HTML violates one of the principles of semantic design (that is, separating the content from the layout), so it’s better (and more efficient) to do the work in JavaScript with jQuery:

function themify(){

//add theme-based CSS to the elements

$(“div”).addClass(“ui-widget”)

.addClass(“ui-widget-content”)

.addClass(“ui-corner-all”);

$(“:header”).addClass(“ui-widget-header”)

.addClass(“ui-corner-all”);

$(“#resizeMe”)

.append(‘’);

}

The themify function adds all the themes to the elements on my page, applying the pretty jQuery theme to it. I use jQuery tricks to simplify the process:

1. Identify all divs with jQuery.

I want all the divs on my page to be styled like widgets, so I use jQuery to identify all div elements.

2. Add the ui-widget class to all divs.

This class is defined in the theme. All jQuery themes have this class defined, but the specifics (colors, font sizes, and so on) vary by theme. In this way, you can swap out a theme to change the appearance, and the code still works. The ui-widget class defines an element as a widget.

3. Add ui-widget-content as well.

The divs need to have two classes attached, so I use chaining to specify that divs should also be members of the ui-widget-content class. This class indicates that the contents of the widget (and not just the class itself) should be styled.

4. Specify rounded corners.

Rounded corners have become a standard of the Web 2.0 visual design. This effect is extremely easy to achieve with jQuery — just add the ui-corner-all class to any element you want to have rounded corners.

Rounded corners use CSS3, which is not yet supported by all browsers. Your page will not show rounded corners in most versions of IE, but the page will still work fine otherwise.

5. Make all headlines conform to the widget-header style.

The jQuery themes include a nice headline style. You can easily make all heading tags (h1 to h6) follow this theme. Use the :header filter to identify all headings, and apply the ui-widget-header and ui-corner-all classes to these headers.

The jQuery UI package supports a number of interesting classes, which are described in Table 4-1.

Table 4-1 CSS Classes Defined by jQuery UI

Class

Used On

Description

ui-widget

Outer container of widget

Makes element look like a widget.

ui-widget-header