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
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).
Figure 11-2. HTML generated by the selectable () method
element was assigned the
CSS class, whereas selectable items it contains have the
ui-selectee class. The first three paragraphs
being selected have the
class. Once the mouse button is released, the selected paragraphs will
then have the
Notice that a
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-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 ...