Pull to Refresh jQuery Plugin For Web - xpull

xpull is one of the pull to refresh plugins for the web. Difference is that this one is lightweight, extremely easy to use and optimized for both Android (mobile Chrome browser) and iOS (mobile safari).

See also:

• jQuery Plugin For Pull To Refresh Web Page - pull2refresh.js
• jQuery Pull to Refresh Plugin for Web Page - Hook.js

Basic usage in jQuery:

1. Include the jQuery javascript together with xpull.js and xpull.css in the document.

<link rel="stylesheet" href="stylesheets/xpull.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascripts/xpull.js"></script>

2. Call the plugin on the container where you want to apply the pull to refresh functionality.

<script>	
$(function(){
$('#container').xpull();		
});
</script>

3. Available options.

$(function(){
  $('#container').xpull({

    // Is the pulling paused ?
    'paused': false,  

    // Pull threshold - amount in  pixels required to pull to enable release callback
    'pullThreshold':50, 

    // Max pull down element - amount in pixels
    maxPullThreshold: 50, 

    // timeout in miliseconds after which the loading indicator stops spinning. 
    // If set to 0 - the loading will be indefinite
    'spinnerTimeout':2000 
    
  });   
});

4. Available callback functions.

$(function(){
  $('#container').xpull({

    // triggers after user start pulls the content
    onPullStart: function(){}, 

    // triggers after user end pulls the content
    onPullEnd: function(){}, 

     // triggers after user pulls the content over pull threshold and releases
    callback: function(){},
    
  });   
});

Change log:

2018-05-01

• Added onPullThreshold and onPullThresholdReverse events that fire when the user exceeds the pullThreshold, or, comes back down

2016-11-05

• Update xpull

2015-10-21

• simply paused property, removing destroy

About author:

Author: Slobodan Jovanovic

Website: https://github.com/sjovanovic/xpull

---

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