article:
Elements Design: Notification Drop Down
article:
Elements Design & UI: Exclusive UI Kit

JS Plugin: Infinity

Advertisement

Plugin: Infinity"Infinity is a UITableView for the web: it speeds up scrolling through long lists and keeps your infinite feeds smooth and stable for your users. It is small, battle-tested, and highly performant."






ListView

"A ListView is a container that moves content in and out of the DOM on the scroll event. ListViews help keep repaint times of expensive pages down (and scrolling smooth) by making sure that there are never too many elements onscreen at a single time. ListViews excel at speeding up long lists of complex HTML elements, where new content is frequently appended to the end and existing content is rarely removed."

"ListViews are simple, and have several caveats: they can't be nested inside each other, and they can't have heights set via CSS. Additionally, ListViews can't easily change sizes except by appending or removing elements, and so list items that need to slide open or change their sizing will be difficult to implement. Appending elements to a ListView is relatively fast, but removing elements is slower — so designs that need to remove elements multiple times a second at high framerates will struggle."

properties listiviews
method listiviews


ListItem

"ListItems are wrappers for individual DOM nodes placed inside a ListView. You'll normally never need to create ListItems yourself: the ListView will automatically wrap any jQuery elements you pass into it for you. However, you may find it useful to interact with them individually — for example, if you need to remove an element, you should do so by calling remove on the ListItem so that it reports the removal to the parent ListView — and so ListViews make it easy to inspect their collections of ListItems. "

properties listitems
method listitems


Usage

  1. var $el = $('#my-infinite-container');
  2. var listView =new infinity.ListView($el);
  3.  
  4. // ... When adding new content:
  5.  
  6. var $newContent = $('<p>Hello World</p>');
  7. listView.append($newContent);
  8.  
  9. // ... To remove items from a list:
  10.  
  11. var listItems = listView.find('.my-items');
  12. for(var index =0, length = listItems.length; index < length; index++){
  13. listItems[index].remove();
  14. }



configuration
source
github
download

Advertisement
Tags: plugin, infinity, jquery, list, scroll

Leave a Comment

No Comment

© Creative3x Ltd.