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 !
'); } } } });