Selectable events: selected, unselected, start and stop : UI Selectable « jQuery « JavaScript DHTML






Selectable events: selected, unselected, start and stop

 

<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.selectable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  
  <style type="text/css">
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
  </style>
  <script type="text/javascript">
  $(function() {
        var selectableObj = {
          selected: function(e, ui) {
            $("#" + ui.selected.id).text("I have been selected!");
          },
          unselected: function(e, ui) {
            $("#" + ui.unselected.id).text("This div can be selected");
          },
          start: function(e) {
            alert("click to select");
          },
          stop: function() {
            $("#tip").fadeOut();  
          }
        }
      
        $("#selectables").selectable(selectableObj);
  });
  </script>
</head>
<body>
<div class="demo">

<ol id="selectables">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>

</div>
</body>
</html>

   
  








Related examples in the same category

1.jQuery UI Selectable - Default functionality
2.jQuery UI Selectable - Display as grid
3.jQuery UI Selectable - Serialize
4.Selectable selecting and unselecting