Minimal Pull To Refresh Plugin With jQuery - pullToRefresh.js

Minimal Pull To Refresh Plugin With jQuery - pullToRefresh.js

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.

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.

  • Publication date: 09.02.2018
  • Source