Lazy loading and DOM optimization
JavaScript CSS
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
tests
.gitignore
CC-LICENSE.txt
README.md
jquery.lift.js
lift.jquery.json

README.md

Lift


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

http://tirabc.github.io/lift


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

  • Height Integer which sets the height of the list
  • Data Array of models
  • Wrapper jQuery Object, the div that contains the list
  • Start Used creating the list the first time (before scrolling)
  • End Used creating the list the first time (before scrolling)

Events

Todo


License

This plugin is available under the Creative Commons License.