Chapter 12. Under the hood of jQuery UI
This chapter covers
- Advanced positioning of elements
- Tips and tricks for dealing with widget instances
- Working with widget properties
- Building declarative widgets
Although we’ve covered the core of jQuery UI, we have yet to dig into a series of utilities, methods, and properties intended for more advanced usage of the library. As you explore these utilities, you’ll also get a look at how jQuery UI works under the hood. You’ll learn things like how jQuery UI manages instances, how it structures prototype chains, and how some of jQuery Mobile works.
Let’s start by looking at how the jQuery UI widgets handle positioning.
Positioning an element relative to another element on the web is surprisingly hard. Besides the brute-force mathematical computations—comparing heights, widths, and offsets—you also have to worry about CSS positioning mechanisms (static, relative, absolute, and fixed), not to mention accounting for the window’s scroll offset, or collision detection if the element doesn’t fit.
This is where the jQuery UI position utility comes in. The position utility provides an elegant API that makes positioning elements a trivial task. It’s what the jQuery UI widgets use to perform all their positioning magic, including centering dialogs, showing tooltips, and placing nested menus in the right spots.