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.

Why?

Sometimes you need a pre-built list that you can reuse. Sometimes you need to scroll through big data sets, and other times you just need component logic kept away from your app logic. It doesn't fit every scenario, but it certainly fits a few.

Data virtualization techniques allow you to quickly scroll through massive lists, without performance degradation. However, if your app really has 100K list items to scroll through, you should fire your UX designer.

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

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.

Observations

Contrary to my expectations, using CSS3 translate3d is actually slower than using CSS top/left when placing the virtualized content. If you enable CSS3 translate3d and set backface visibility, there is an extremely noticeable performance degradation on both desktop and mobile devices.
I've experimented with lots of permutations to get the best performance possible. I'm not finished yet, but I've found that you can achieve significantly faster performance of DOM manipulation by removing elements from the DOM, manipulating them, then re-adding them. This is what is done within the updateLayout() method. The <ul> is removed from the DOM, <li> elements are added or removed, and then the <ul> is added back to the DOM. You may see a flicker on rare occasions, but I didn't find this overly intrusive.
For small data sets, this may not be much advantage - you can get better performance by just using something like iScroll in a <div> containing a <ul>. With large data sets, this is definitely faster.
The more complex the HTML inside of your label function, the slower the animation will be.

LICENSE

THIS SOFTWARE IS PROVIDED BY ANDREW M. TRICE ''AS IS'' AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL ANDREW M. TRICE OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.