Minimal Pull To Refresh Plugin With jQuery - pullToRefresh.js
| File Size: | 5.41 KB |
|---|---|
| Views Total: | 2356 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A lightweight and easy-to-use jQuery pull to refresh plugin which can be used to load more content by dragging the screen downward with the finger.
How to use it:
1. Include the Font Awesome for the animated loading indicator when pull to refresh.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
2. Include jQuery library and the jQuery pullToRefresh.js script on the page.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src="js/pullToRefresh.js"></script>
3. Call the main function pullToRefresh on the container and specify the callback function which will be triggered after user pulls the content.
<div id="main"> <div id="header">HEADER</div> <div id="container">Container</div> </div>
$('#container').pullToRefresh({
refreshCallback: function(){
// can be used to load more content
setTimeout(function(){
$('#container').pullToRefresh().stop();
},5000)
}
});
This awesome jQuery plugin is developed by lcapps-es. For more Advanced Usages, please check the demo page or visit the official website.








