O'Reilly logo

jQuery UI by Eric Sarrion

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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");
  },
  

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required