Sandbox: JavaScript

A generic handler for allowing for the selection of items in a list.

Examples

This simple example just lets you select a button from the group to demonstrate the selection of an item from the list.

<div data-behavior="InteractiveList" data-interactivelist-options="
  'selectedClass': 'btn-primary',
  'autoScroll': false,
  'listItems': '.btn'
">
  <button type="button" class="btn btn-default">
    One
  </button>
  <button type="button" class="btn btn-default">
    Two
  </button>
  <button type="button" class="btn btn-default">
    Three
  </button>
  <button type="button" class="btn btn-default">
    Four
  </button>
</div>

Example with auto-scrolling

Interactive list defaults to scrolling oveflown elements to their selected item. In this example clicking any element automatically scrolls it to the top of the component.

<ul class="nav nav-list nav-list-vivid col-md-3"  data-behavior="InteractiveList" data-interactivelist-options="
  'selectedClass': 'active'
" style="height: 120px; overflow: auto">
  <li class="nav-header">Europe</li>
  <li>
    <a href="#fakelink">
      London, United Kingdom
      <span class="badge pull-right">19</span>
    </a>
  </li>
  <li class="active">
    <a href="#fakelink">
      Berlin, Germany
      <span class="badge pull-right">130</span>
    </a>
  </li>
  <li>
    <a href="#fakelink">
      Madrid, Spain
      <span class="badge pull-right">9</span>
    </a>
  </li>
  <li class="divider"></li>
  <li class="nav-header">Asia</li>
  <li>
    <a href="#fakelink">
      Shanghai, China
      <span class="badge pull-right">69</span>
    </a>
  </li>
  <li>
    <a href="#fakelink">
      Bombay, India
      <span class="badge pull-right">21</span>
    </a>
  </li>
  <li>
    <a href="#fakelink">
      Karachi, Pakistan
      <span class="badge pull-right">40</span>
    </a>
  </li>
</ul>

Behavior Options

These options apply only to the data- tag invocation.

Name type default description
selectedClass string 'selected' The name of the class given to the selected item.

Note The default is almost always wrong if you're in Bootstrap-land. Use 'active', which you'll have to set yourself.

listItems string 'li' The selector to find the items in the list.
autoScroll string true If true automatically scrolls any overflown elements to the selected element.
scrollAxes string null An array or string specifying which axes to scroll on, can be x, y, or ['x', 'y']. It defaults to both axes.
firstItemSelected string false If true, will select the first list item.

Note If any list item already has the selectedClass it will be marked as selected for you on startup.

doubleScroll boolean true If `true`, scrolls the list to the clicked item even if that item is already the active item.