Chapter 4. Enhancing interfaces with layout and utility widgets
This chapter covers
- Organizing content with layout widgets
- Organizing actions into menus
- Opening content in interactive dialogs
- Replacing the browser’s native tooltips
- Building a message composer
In chapter 3, you looked at using the jQuery UI form widgets to build powerful web forms. In this chapter, you’ll focus on the jQuery UI widgets dedicated to displaying content and utility functionality.
The jQuery UI layout widgets—accordion and tabs—provide an easy means of organizing content in panels that can be shown and hidden. These widgets can organize content in digestible chunks, or present content in a limited amount of space. You’ll look at the structure of these widgets, then see how to add advanced functionality, such as loading remote content and dynamically creating panels.
The jQuery UI utility widgets—menu, dialog, progressbar, slider, and tooltip—bring a number of desktop UI controls to the web. Although these controls have been on the desktop for years, they remain nontrivial to create on the web. You’ll see that the jQuery UI utility widgets make it not only possible but easy to create powerful interactions such as displaying content in animated pop ups, selecting values in a range, and building tooltips with complex markup. On top of all this, you still get the themeability and accessibility that is built into all the jQuery UI widgets.