bouda/megalist

Megalist is a jQuery plugin that creates a touch-enabled list component, capable of very large datasets, complete with data virtualization.

MegaList

Introduction

Megalist is a jQuery plugin that creates a touch-enabled list component, capable of very large datasets, complete with data virtualization. It was originally intended for touch-enabled devices, however it also works in many desktop browsers.

For performance optimizations, the list component uses data virtualization techniques, so there are never more list elements in the HTML DOM than what is currently visible on the screen. As the user scrolls through content, the list updates the DOM elements accordingly. This makes scrolling lists of thousands of items extremely fluid.

There are two methods that the list component can be used. One option is to declare the list structure in HTML markup, another option is to specify a dataProvider array, from which the list will create DOM elements.

Samples

View the "samples" directory to see the scrollable list component in action. All samples are interactive, and scrollable via touch or mouse events, with function event handlers.

Simple List Created With Inline LI elements

• View Sample
• View Source

Simple List Created With A DataProvider of 100,000 items:

• View Sample
• View Source

Styled Dynamic List Created With Remote Data:

• View Sample
• View Source

API

Methods

Event	Description
.megalist()	Initializes a list component.
.megalist('setDataProvider', dataProviderArray)	Initializes a list component.
.megalist('setLabelFunction', labelFunction)	Sets the data provider array for the list instance. There is no concrete limit on the length of the data provider array. Elements within the array can be of primitive or complex types.
.megalist('setSelectedIndex', index)	Set the item at selected index as selected.
.megalist('getSelectedIndex', index)	Returns the currently selected index. If no list item is selected, returns -1.
.megalist('clearSelectedIndex', index)	Clears the currently selected item in the list.

Events

Megalist exposes a change event for handling when the selected item in the list changes.

Event

Description

change

This event is fired when the selected item in the list is changed. You can access details of the selected item in the list by accessing attributes of the event. event.index The numeric index for the item in the list that was clicked/touched. event.srcElement A jQuery reference to the list item that was clicked/touched. event.item A reference to the data item for the list item. If using inline <li> in markup, this will be the same DOM element as event.srcElement. If using a dataProvider, it will be the object in the dataProvider array corresponding to the selected list item.