http://www.21studio.com/infiniteScroll
- Now support bower, just type bower install infiniteScroll
- Adding event hooks
- Adding property enable
- jQuery No Conflict Support
<div id="wrapper">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
<a class="url" data-href="http://yourweb/yourfile.php">
</div>
Calling jQuery Infinite Scroll
$('#wrapper').infiniteScroll();
yourfile.php
if(allDataHaveBeenLoaded()){
echo 'done';
}
else{
//whatever you want to display
}
To disable it, just do
$("#wrapper").infiniteScroll({enable:false});
| Options | Explanations | Default |
|---|---|---|
| classNextSelector | Class Selector to fetch next data | .url:last |
| dataAttributeNextSelector | Data attribute that containing url to fetch next data | href |
| enable | Enabling jQuery Infinite Scroll | true |
| resultWord | The word that telling jQuery Infinite Scroll that all data have been loaded | done |
| loading | Something you want to display when jQuery Infinite Scroll fetch next data | <div class="loading" style="text-align:center;">Loading...</div> |
| classLoading | The class of something you want to display when jQuery Infinite Scroll fetch next data | loading |
| startAt | The position of scroll bar to start fetch next data (0 <= startAt <= 1) | 1 |
| animation | The animation of displaying next data (available animation : fade or slide) | fade |
| animationSpeed | The speed of your animation, it can be slow, fast, or speed of millisecond | slow |
| done | Something you want to display when all data have been loaded | <div style="text-align:center;">It\'s done.</div> |
| Event | Explanations |
|---|---|
| onLoad | Doing something when loading next data |
| success | Doing something when loading is success |
| onFinish | Doing something when all data have been loaded |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent