lou/listy

Plugin to make lists browsable through keyboard

listy

I'm a tiny jQuery plugin which aim to facilitate developer making lists browsable through keyboard.

I just do the list stuff and let the developer do whatever he wants to do when user selects anything in the list.

Demo: http://lou.github.io/listy/

Usage

html:

  <ul class='listy'>
    <li>elem 1</li>
    <li>elem 2</li>
  </ul>

javascript:

  $('.listy').listy({
    actions: {
      select: {
        method: function(elem){
          elem.addClass('select');
        },
        keys: [13, 32],
        events: 'click dblclik'
      }
    }
  });

css:

  ul{
    position: relative;
    overflow-y: auto;
    height: 200px;
  }

Options

actions: Object where you can define actions you want to fire when specified keys and/or events are triggered. You can define as many actions as you want.

example:

  actions: {
    // the following method will be fire
    // when user click/dblclick on elem
    // or press keys 13,32 (space, enter)
    yourCustomMethod: {
      method: function(elem){
        elem.doSomethingCool();
      },
      keys: [13, 32],
      events: 'click dblclick'
    }
  }

• upKeys: keys code for the up action (default: [38] | type: Array)
• downKeys: keys code for the down action (default: [40] | type: Array)
• inactive: jQuery selector for the non-selectable items (default: '.muted' | type: String)
• element: jQuery selector for the items (default: 'li' | type: String)