Examples of Using the Selection Mechanism

Let’s apply the information presented in this chapter. Here, we’ll create examples that incorporate the selection mechanism.

Displaying the Order of the Events During the Selection

The goal in this example is to display the order of the events described above (shown in Figure 11-6). For this, we display five selectable paragraphs and a <span> element containing the name of events. The start event is shown in bold to indicate the beginning of a new sequence:

<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<style type=text/css>
  p.ui-selecting {
    color : red;
  }
  p.ui-selected {
    background-color : gainsboro;
  }
</style>

<div id=div1>
  <p> Paragraph 1 </p>
  <p> Paragraph 2 </p>
  <p> Paragraph 3 </p>
  <p> Paragraph 4 </p>
  <p> Paragraph 5 </p>
</div>

<hr />

<span id=result></span>

<script>

$("#div1").selectable ({
  start : function (event)
  {
    $("span#result").html ($("span#result").html () + " <b>start</b>");
  },
  stop : function (event)
  {
    $("span#result").html ($("span#result").html () + ", stop");
  },
  selecting : function (event, ui)
  {
    $("span#result").html ($("span#result").html () + ", selecting");
  },
  unselecting : function (event, ui)
  {
    $("span#result").html ($("span#result").html () + ", unselecting");
  },
  selected : function (event, ui)
  {
    $("span#result").html ($("span#result").html () + ", selected");
  },
  

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.