Simple Pull To Refresh For Desktop & Mobile - mkPullFresh

mkPullFresh is a small and easy jQuery pull/swipe to refresh plugin to load more content into the current page just like the native mobile app.

The plugin provides a simple way to implement the pull/swipe-to-refresh user interface pattern on your web application that allows the user to asynchronously retrieve more content by pulling down the current data list with mouse drag or touch swipe.

How to use it:

1. Add jQuery library and the mkPullFresh plugin's files to the webpage.

<link href="/path/to/build/mk-pullfresh.css" rel="stylesheet" />
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/build/mk-pullfresh.js"></script>

2. Attach the function mkPullFresh() to your data list and do something on drag/touch end.

<div id="example">
  <p>Pull this text down by mouse or finger and drop it to refresh content of the box.</p>
  ....
</div>

$('#example').mkPullFresh(function(end){
  // custom function to load more content 
  end(); // stop pending state
});

3. Use the following CSS to prevent the 'Unable to preventDefault inside passive event listener' error.

#example {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

4. Customize the loading indicator in the CSS.

$('#example').mkPullFresh({ 
  indicatorHtml: '<div class="mkpf-envelop"><div class="mkpf-indicator-wrapper"><div class="mkpf-indicator"><div class="mkpf-icon-wrapper"><i class="mkpf-arrow-down"></i></div><i class="mkpf-spinner"></i></div></div></div>'
});

5. Or use the Material Design inspired loading indicator.

<div id="example" class="mkpf-material">
  <p>Pull this text down by mouse or finger and drop it to refresh content of the box.</p>
  ....
</div>

6. More possible options.

$('#example').mkPullFresh({ 

  // drag/touch threshold in pixels
  maxShift: 100, 
  readyShift: 60,
  pendingShift: 60,

  // callback or milliseconds to stop pending refresh(end)
  refresh: null
      
});

7. Event handlers.

$('#example').mkPullFresh({
  emitEvents: true
})
.on('mkPullFreshStart', function(e,y,pf){
  // do something
})
.on('mkPullFreshPull', function(e,y,pf){
  // do something
})
.on('mkPullFreshPending', function(e,end,pf){
  // do something
})
.on('mkPullFreshEnd',  function(e,pf){
  // do something
})

---

This awesome jQuery plugin is developed by m-kant. For more Advanced Usages, please check the demo page or visit the official website.