Formatting Content

The selectable () method displays a dotted rectangle symbolizing the selection. In addition, it adds new CSS classes to HTML elements that are selectable as well as those selected.

In Figure 11-2, for example, the HTML generated by jQuery UI after the selectable () method changed the HTML (the code was recovered using the Firebug extension in Firefox).

HTML generated by the selectable () method

Figure 11-2. HTML generated by the selectable () method

The encompassing <div> element was assigned the ui-selectable CSS class, whereas selectable items it contains have the ui-selectee class. The first three paragraphs being selected have the ui-selecting class. Once the mouse button is released, the selected paragraphs will then have the ui-selected class (instead of ui-selecting).

Notice that a <div> was created by jQuery UI (ui-selectable-helper class), which is the dotted rectangle representing the selection. This <div> will be removed from the page when the mouse button is released.

You can use CSS classes of elements to customize the display. For example, if we change the CSS classes ui-selecting and ui-selected associated with <p> elements, we should get a new look for items being selected and deselected.

Modify these elements in the HTML by adding a <style> tag so that the rectangle and the selected paragraphs are displayed with a solid red line (Figure 11-3). When the mouse is released, the selected paragraphs ...

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.