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.
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:
| 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. |
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. |