Javascript widget inspired by iPhone UITableView? - Stack Overflow

admin管理员组

文章数量:1288016

Cocoa Touch's UITableView allows a user to scroll through large numbers of data rows with good performance because it recycles table rows. Rather than create a GUI element for every single data row, a limited number of table rows is created, and simply updated with the relevant data as the user scrolls, giving the illusion of navigating up and down a very large number of table rows.

Has anyone seen this done in javascript? Is there a plugin available anywhere that will do this for me?

Cocoa Touch's UITableView allows a user to scroll through large numbers of data rows with good performance because it recycles table rows. Rather than create a GUI element for every single data row, a limited number of table rows is created, and simply updated with the relevant data as the user scrolls, giving the illusion of navigating up and down a very large number of table rows.

Has anyone seen this done in javascript? Is there a plugin available anywhere that will do this for me?

• javascript
• iphone

Share Improve this question Follow asked Jul 15, 2010 at 18:05 morgancodesmorgancodes 25.3k3939 gold badges138138 silver badges191191 bronze badges 1

• 1 Elliot's response should be the answer to this question. – Shyam Habarakada Commented Jun 27, 2013 at 7:57

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

infinity.js works well. It will dynamically load 'pages' behind the scenes giving you the appearance that the list has been fully loaded.

More information can be found on their Github page - https://github./airbnb/infinity

Additionally, I've forked the project updating it to work with Zepto. I also set it up to use any scrollable div (set up with overflow: scoll) with the class 'scrollable' - https://github./elliotcw/infinity

I should add that I made these changes as this is great for large lists on mobile devices, which slow down when you have to many plex elements on the page.

I was looking for this as well, and infinityjs [1] doesn't seem to quite mimic the same interface as UITableView. And it was a problem for my scenario that infinityjs required that the element containing the list items already be added to the DOM.

MegaList [2] came closest to what I wanted. Andrew (author) has done a great job of designing it for mobile first, with touch support etc. One caveat for me was that it appears to assume a strict selection list model and does a little bit more than I'd like a list ponent to do (e.g. binding to resize events and trying to handle that automatically).

So I started writing a barebones list ponent, also modeled after the iOS UITableView. It's a work in progress and I'm putting in just what I need. Sources are here https://github./shyam-habarakada/js-virtual-list-view. I'm putting in just what I need as I go, and contributors are needed :-)

[1] http://airbnb.github.io/infinity/

[3] https://github./triceam/MegaList

Actually the algorithm is not difficult at all. If you know javascript you should be able to write this. The algorithm only needs the height of a cell and the height of the table.

I only know these two: Apple's Dashcode javascript Framework has an implementation of a Table. You could take a look and see if that is what you need. Or Cappuccino Framework which is basically Objective-J but behind the scenes is Javascript.

Clusterize.js does exactly that.

It's small and works with any tag (table, lists, divs)

本文标签： Javascript widget inspired by iPhone UITableViewStack Overflow