MegaList

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

OTHER License

Stars
79

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

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

Styled Dynamic List Created With Remote Data:

API

Methods

Events

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