Chapter 12. The Resizable Component

We have already seen resizables in action briefly when we looked at the dialog widget, earlier in the book. In this chapter, we're going to focus on it directly. However, the dialog is a perfect example of how useful the resizable component can be in a real-world implementation.

The resizable widget adds the same functionality that is automatically added to <textarea> elements in WebKit browsers such as Safari or Chrome, or newer versions of Firefox. In these browsers, a resize handle is added to the bottom-right corner, which allows the element to be resized. With the jQuery UI resizable component, we can add this behavior to almost any element on the page.

In this chapter, we'll be looking at the following aspects of the component:

• Implementing basic resizability

• The configurable options available for use

• Specifying which resize handles to add

• Managing the resizable's minimum and maximum sizes

• The role of resize helpers and ghosts

• A look at the built-in...