JavaScript & jQuery: The Missing Manual, 3rd Edition

Chapter 9. Expanding Your Interface

With jQuery and a little programming, you’ve seen how to add enhancements to forms, images, and links. You’ve added animations to your pages and created simple user interface elements like the login slider on Tutorial: Login Slider and the animated dashboard on Tutorial: Animated Dashboard. But perhaps you’re ready for more complex user interface elements like pop-up dialog boxes, tabbed panels, or tooltips. You could learn to program that stuff from scratch, but as you read on Introducing jQuery Plug-ins, there’s a wide range of jQuery plug-ins that have them all figured out for you. jQuery UI is a plug-in that’s solved a lot of user interface problems and wrapped those solutions into an easy to use package.

What Is jQuery UI?

jQuery UI (http://jqueryui.com) is an advanced jQuery plug-in and a sister-project to jQuery (Figure 9-1). jQuery UI provides a large set of effects, user interactions, and interface elements (called widgets) that simplify the process of building an interactive web application. In fact, in Chapter 14, you’ll use jQuery UI and some custom programming to build a basic (but useful) web application.

jQuery UI is made up of many different parts which can be grouped into three categories:

• Widgets. A widget is a chunk of JavaScript that provides one useful interface element. For example, the dialog widget lets you display pop-up dialog boxes—they’re like custom alert boxes (Adding Messages with Dialog Boxes), but ...