Formatting Content

The resizable () method displays an icon in the bottom right of the item to resize. In addition, it adds new CSS classes to resizable HTML elements.

In Figure 13-2, for example, the jQuery UI changes the HTML following the resizable () instruction (this code was recovered using the Firebug extension in Firefox).

The <p> element was assigned the ui-resizable CSS class, while three new <div> elements became part of it, as follows (they all have the ui-resizable-handle CSS class):

  • The right side of the element uses the ui-resizable-e CSS class (e indicates East).

  • The bottom of the element uses the ui-resizable-s CSS class (s indicates South).

  • The icon at the bottom right corner of the resizable element uses the ui-resizable-se CSS class (se indicates Southeast).

HTML generated by the resizable () method

Figure 13-2. HTML generated by the resizable () method

You can use CSS classes of elements to customize the display. For example, if we change the ui-resizable-e and ui-resizable-s CSS classes, we can prevent scaling on the sides and force the user to resize using only the icon in the lower right corner. To customize the display, simply specify a different value for width and height properties of these elements (width changes the width of the ui-resizable-e element, while height changes the height of the ui-resizable-s element).

Modify these elements in the HTML by adding a <style> tag:

<script src = jquery.js></script> ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.