Licensed under the Apache Software License 2.0

This component may be obtained, modified and distributed free of charge for personal as well as commercial use. Please see the license for the complete terms and exact wording.

2002-09-19: First public version released.
2006-05-28: Changed license to Apache Software License 2.0.

Introduction

This is script that allows you to select HTML elements using the mouse. It can be used to allow the user to select items in a list, rows in a table or anything else you seem fit.

The goal for this script was to make it very generic so that it could easily be modified to support different types of elements and element structures. Another goal was to support any browser supporting DOM1 HTML (and basic DOM2 Events support). But even if the browser does not support the W3C DOM the data should still be available to the user.

To get a better feeling for how the script behaves take a look at the demo.

Implementation

In its simplest case the behavior allows selection of child elements of an HTML element. Once the child is selected the className property is updated to include selected. This is done using two very useful functions called addClassName and removeClassName.

The implementation of the complete script is fairly easy. It listens to mouse clicks and when the user clicks on an element it is selected. The only thing making it a bit more interesting (and more complicated) is the support for multiple selection by holding down the ctrl or shift key.

We add an event listener for the click event in the constructor and once clicked we handle that in a method of the object.

function SelectableElements(oElement, bMultiple) {
   if (oElement == null)
      return;

   this._htmlElement = oElement;
   this._multiple = Boolean(bMultiple);

   this._selectedItems = [];
   this._fireChange = true;

   var oThis = this;
   var f = function (e) {
      if (e == null) e = oElement.ownerDocument.parentWindow.event;
      oThis.click(e);
   };

   if (oElement.addEventListener)
      oElement.addEventListener("click", f, false);
   else if (oElement.attachEvent)
      oElement.attachEvent("onclick", f);
}

Notice how we encapsulate the this object and use a local function object in the event listeners. Also notice how we test whether the DOM2 Events method addEventListener is supported and if not fall back on the IE proprietary equivalent method.

We are not going to list the click method here but feel free to look at the source code.

Traversable Interface

To be able to support multiple selection we must know how to go from current selected element to the next or previous item. We also needs to be able to tell whether an item comes before another item. There are three methods, getNext, getPrevious and isBefore that does these things.

Indexable Interface

Another very useful addition is the ability to index items. This isn't required to support selection or multiple selection but it can be useful and in some cases it might be easier to first implement the indexable interface and then use it to implement the traversal interface.

The indexable interface contains four methods; getItems, getItem, getSelectedIndexes and getItemIndex.

Introduction
Usage
Sub Classes
API
Demo
Download

Author: Erik Arvidsson