• Choose a category
• All
• Classic-Fiction

By Root 1298 0

earth-shattering about this (after all, it’s just CSS), the exciting thing is that these styles are defined by the theme. The theme can easily be changed to another theme (created by hand or via themeRoller), and the visual look of all these elements will reflect the new theme.

Themes provide a further level of abstraction to your Web sites that make changing the overall visual style much easier.

Figure 4-6 shows the page after the resize me element has changed sizes, and you can see that the rest of the page reformats itself to fit the newly resized element.

Figure 4-5: The size of this lovely element can be changed by the user.

Figure 4-6: When the element is resized, the rest of the page adjusts.

The following code reveals that most of the interesting stuff is really CSS coding, and the resizing is really just more jQuery UI magic:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

type = ”text/css”

href = ”css/ui-lightness/jquery-ui-1.8.1.custom.css” />

Resize Demo

Examining the HTML and standard CSS

As usual, the HTML is the foundation of the entire page. It’s very clean as usual, and it shows the general structure of the page. The HTML consists of only three primary elements: a heading and two divs. Each div contains its own level-two heading and a paragraph. The divs are given IDs to make them easier to style.

I also included a basic CSS section to handle the general layout of the page. I wanted the widgets to have specified beginning sizes, so I used ordinary CSS to get this effect.

Importing the files

jQuery applications require importation of JavaScript code libraries. In this application (and most jQuery UI applications), I import three files:

♦ The main jQuery library: This file is the essential jQuery base library. It is imported as described in Chapter 2 of this minibook, as an ordinary JavaScript file.

♦ The jQuery UI library: This file is also a standard JavaScript library. Earlier in this chapter, I describe how to obtain a custom version of this file.

♦ The theme CSS file: When you create a theme with themeRoller, you are provided with a CSS file. This file is your theme. Because this is a CSS file rather than JavaScript code, use the link tag to attach it to your page.

Not all jQuery UI examples require a theme, but most do. As you see in the following example, themes provide some other really great effects too, so it’s worth it to include a theme CSS file whenever you want to use jQuery UI.

Making a resizable element

Surprisingly, the easiest part of the project is making the resizable element have the resizable behavior.