jQuery Plugin For Pull To Refresh Web Page - pull2refresh.js

pull2refresh.js is a jQuery plugin that provides pull to refresh functionality for web pages, as you seen in most mobile APPs. Supports drag event on desktop and touch event on mobile.

How to use it:

1. Include jQuery library and other necessary resources in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="../js/jquery.ui.touch-punch.min.js"></script>
<script src="../js/jquery.velocity.min.js"></script>

2. Include the jQuery pull2refresh.js after jQuery library.

<script src="jquery.pull2refresh.js"></script>

3. Wrap your main content in a wrapper element.

<div id="content"></div>

4. The Javascript to enable the plugin.

<script>
$("#content").pull2refresh('init', {
loaderImage: "images/loader.gif", /* optional */
loaderClass: "pull2refresh-loader", /* optional */
triggerAtY: 200, /* optional */
start: function() {
asyncFunction(function() {
$("#content").pull2refresh('hide');
})
}
});

function asyncFunction(callback) {
setTimeout(function() {
  callback();
}, 1000)
}
</script>

4. The CSS to style the loader.

.pull2refresh-loader {
position: absolute;
margin: 60px 0 0 -38px;
left:50%;
}

---

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