Performlist

Performlist is an HTML5 library for making fast scrolling lists (i.e. a contact list).

Every Mobile Native framework (ObjC, Android SDK...) has a "widget" for displaying content through a scrolling list. HTML5 didn't had yet... I mean for long scrolling lists that struggle to be displayed in a browser. PerformList was first build for "native web" applications, like the ones built with Apache Cordova. It also generates an automatic touchable index when using items with categories.

See my presentation (in French) about "native web" feedback

Licence

MIT (https://github.com/mysegfault/performlist/blob/master/LICENSE)

Main features

Mobile first
Designed for performance
Generated automatically an index when used with categories
AMD ready
Asynchronious data loading
SAP (Single Application Page) ready
CSS / JS non obstructive (so it doesn't break your existing code)
Use broadcast signal (pub/sub) design
Compatible with iScroll lists
Auto resizeable

Dependencies Bower plugins

pubsub-js (git://github.com/mroderick/PubSubJS.git)
js-dom-tools (git://github.com/mysegfault/js-dom-tools)
requirejs (git://github.com/jrburke/requirejs.git)
raf.js (git://github.com/ngryman/raf.js.git)

Optional (for better browser support like Android 2):

"html5-polyfills" bower package. (git://github.com/remy/polyfills.git) ** use classList.js

Install

bower install performlist

How to use it

require() the performlist AMD module
First instanciate the class (1 instance by list)
initialize the performList (and optionally configure it)
Set JSON data when list is initialized ⋅⋅1. Simple list items ['a', 'b'] ⋅⋅2. List items with category {'French': ['a', 'b'], 'English': ['c', 'd']}

require(['perform-list/perform-list', 'pubsub-js/pubsub'], function(PerformList, pubsub) {

    var list = new PerformList();
    list.init();

    pubsub.subscribe('mbs.performlist.initialized.' + list.getId(), function() {
        var items = ['a', 'b'];
        list.setData(items);
    });

});

Examples

Download the project and use the "examples" folder that contains a snapshot of all the libraries

access directly the performlist examples

Notes

performlist works with browser native scroll

overflow-y: scroll

And also work with iScroll lists.

iScroll is recommanded for iOS devices + old Android devices.

Feedback / comments are welcomed !! :D

mysegfault / performlist

readme