View on GitHub

Lift

Virtual Rendering & DOM optimization for long lists

Download this project as a .zip file Download this project as a tar.gz file

What's that ?

A jquery plugin for long lists optimised for mobile devices.

You can now display more than 100,000 rows without lacking of performance.

The Lift jquery plugin generates just one collection of DOM nodes and uses always them to display your data. You avoid flow & reflow and you save precious milliseconds.

For developers: this plugin was created with KISS & DRY principles in mind. Don't hesitate to fork the project and to improve the code.


Demos & Examples

Desktop

jQuery Mobile


How to use it ?

Lift depends on jQuery. Include them both in end of your HTML code:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lift.js" type="text/javascript"></script>

HTML

<div id="wrapper">
  <ul id="longlist">
  </ul>
</div>

JS

$(document).bind("mobileinit", function(){

  $('#longlist').lift({
    wrapper: $("#wrapper"),
    models: data
  });

  // Lift triggers an event each render process is finished      
  $("#longlist").on( "rendered" , function(){
    $(this).listview( "refresh" );
  });

});

CSS

No CSS hack needed.


Methods, Options and Events

Methods

$('#myul').lift( options );

Options

Events

Todo


License

This plugin is available under the Creative Commons License.