• Choose a category
• All
• Classic-Fiction

By Root 1505 0

options. You can change fonts, add rounded corners, pick various color schemes, and much more. You can mess around with these options all you want and create your own visual style. You can then save that theme and use it in your own projects.

The themes and widgets are obvious features of the jQuery user interface library, but they aren’t the only features. In addition to these more visible tools, jQuery UI adds a number of new behaviors to jQuery nodes. These new behaviors (drag and drop, resize, and more) are used to add functionality to a Web page, which is quite difficult to achieve in more traditional programming.

The themeRoller example

themeRoller is a great example for a number of reasons. It offers a pretty good overview of the jQuery UI library, but it’s also a great example of where the Web is going. It’s not really a Web page as much as an application that happens to be written in Web technologies. Notice that the functionality of the page (the ability to change styles dynamically) uses many jQuery and jQuery UI tricks: tabs, accordions, dialog boxes, and so on. This kind of programming is almost certainly the direction Web development is heading, and may indeed be the primary form of application in the future. Certainly it appears that applications using this style of user interface and AJAX for data communication and storage are going to be important for some time to come.

Wanna drag? Making components draggable

The basic idea of this program is completely consistent with the jQuery concepts described in Chapters 2 and 3 of this minibook. The page has very simple HTML code. An initialization function creates a special jQuery node and gives it functionality. That’s all there is to it.

Your first building example is a simple application that allows the user to pick up a page element and move it with the mouse. While you do this with JavaScript and DOM in Book IV, Chapter 7, you’ll find it’s quite easy to get the same effect with jQuery UI. Figure 4-4 shows this page in action.

Figure 4-4: The user can simply drag the box anywhere on the page.

This example is a good starting place, because it’s pretty easy. Often, the hardest part of jQuery UI applications is attaching to the library. After that’s done (and it’s not that hard) the rest of the programming is ridiculously easy. Take a look at the code, and you can see what I’m talking about:

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

Drag Demo

Downloading the library

Writing jQuery UI code isn’t difficult, but getting the right parts of the library can be a bit confusing. The jQuery UI library is much larger than the standard jQuery package, so you may not want to include the entire thing if you don’t need it.

Previous versions of jQuery UI allowed you to download the entire package but stored each of the various elements in a separate JavaScript file. It was common to have a half-dozen different script tags active just to get the various elements in place. Worse, some dependency issues existed, so you needed to make sure that you had certain packages installed before you used other packages. This made a simple library quite complex to actually use.

Fortunately, the latest versions of the jQuery UI make this process quite a bit simpler:

1. Pick (or create) your theme.

Use the