Listy

1. Focus the following list (by using tab or clicking into it)
2. Use keyboard up/down keys to navigate
3. Press space/enter to select an item (or click it)
4. Press backspace to remove an item (or double click it)
5. Press i to mark an item as inactive

• elem 1
• elem 2
• elem 3
• elem 4
• elem 5
• elem 6
• elem 7
• elem 8
• elem 9
• elem 10

<ul tabindex='0' class='listy'>
  <li class='muted'>elem 1</li>
  <li>elem 2</li>
  <li>elem 3</li>
  <li>elem 4</li>
  <li>elem 5</li>
  <li>elem 6</li>
  <li>elem 7</li>
  <li class='muted'>elem 8</li>
  <li>elem 9</li>
  <li>elem 10</li>
</ul>

$('.listy').listy({
  actions: {
    select: {
      keys: [13, 32],
      events: 'click',
      method: function(elem){
        if (elem.hasClass('selected')){
          elem.removeClass('selected');
          $('#console').prepend(elem.text()+' deselected !
');
        } else {
          elem.addClass('selected');
          $('#console').prepend(elem.text()+' selected !
');
        }
      }
    },
    remove: {
      keys: [8],
      events: 'dblclick',
      method: function(elem){
        elem.hide();
        $('#console').prepend(elem.text()+' removed !
');
      }
    },
    inactive: {
      keys: [73],
      method: function(elem){
        elem.removeClass('selected listy-hover')
          .addClass('muted')
          .off('click dblclick');
        $('#console').prepend(elem.text()+' inactived !
');
      }
    }
  }
});