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

jQuery Plugin For Pull To Refresh Web Page - pull2refresh.js
File Size: 142 KB
Views Total: 5012
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.