Selectable selecting and unselecting : UI Selectable « jQuery « JavaScript Tutorial






<html>
  <head>
  <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>  
    <script type='text/javascript'>
$(document).ready(
  function() {
    $('ul').selectable({
      selecting: function(e, ui) {
        $(ui.selecting).addClass('tmpSelected');  
      },
      unselecting: function(e, ui) {
        $(ui.unselecting).removeClass('tmpSelected');   
      }
    });
  }
);
    </script>
    <style type='text/css'>
ul {
    list-style: none;

}
li {
    background: gold;

}
li.tmpSelected {
    background: yellow;
}
    </style>
  </head>
  <body>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
  </body>
</html>








30.147.UI Selectable
30.147.1.jQuery UI Selectable - Default functionality
30.147.2.jQuery UI Selectable - Display as grid
30.147.3.jQuery UI Selectable - Serialize
30.147.4.Selectable events: selected, unselected, start and stop
30.147.5.Set containment to the container and distance to 30
30.147.6.Selectable selecting and unselecting