Chapter 2. Enhancing UIs with widgets
This chapter covers
- Creating widgets using jQuery UI
- Reading the jQuery UI API documentation
- Customizing widgets using options, methods, and events
A widget, as explained in chapter 1, is a reusable UI component. The 12 UI widgets in jQuery UI help solve the most common UI problems that web developers run into. In chapters 3–5, you’ll look at each widget specifically, but first, you’ll learn how widgets in jQuery UI work, and how to customize their behavior.
The widgets in jQuery UI are created with the widget factory: a mechanism for creating powerful, feature-rich jQuery plugins. Because all widgets go through a single factory, after you learn how one works, you’ll have a good idea of how they all work. In this chapter we’ll focus on three mechanisms the widget factory provides for customization: options, methods, and events. Options are configurable properties of widgets, methods let you perform actions on the widget, and events let you respond to changes on the widget.
To begin, let’s see how to create widgets.
At their core, jQuery UI widgets are jQuery plugins with added functionality to make them customizable, extensible, and themeable. Whereas most jQuery plugins run once and are done, widget plugins remember the elements they’re associated with. You can then customize the widget with options, control it with methods, and respond to changes on the widget with events.