This component is mainly focused on mobile devices. It works as well in desktop using the mouse by dragging down the container.
Pull to refresh controls are very useful in mobile apps because gives you the ability of quickly refresh any list, carousel or wathever with a well controlled gesture.
This page is wrapped with a Refresh control so you can pull down to refresh. When you release, the image in the playground section will be refreshed.
The control only works if you has not scrolled the page because you´ll want the normal behaviour of scrolling down in your device.
So ... scroll to top and start dragging down ... :).
<div class="st-refresh"> <div class="st-refresh-pullrefresh"> <div class="message"> <div class="st-refresh-icon arrow arrow-down"></div> <span data-pull="Pull to refresh !!" data-release="Release !!" data-loading="Loading..."> </span> </div> </div> <div> ... Your content here ... </div> </div>
Stashy.Refresh(selector, options)
Parameter | Type | Description | |
---|---|---|---|
selector | string | CSS selector. Select the Refresh container | |
options | object | See options | You can pass the options to the refresh instance |
Option | Type | Default | Description |
---|---|---|---|
onRelease | function | $.noop | You need to use this function for doing something when release Refresh after dragging down. The common use is to do some ajax request and call slideUp() for hiding the Refresh control |
breakpoint | int | 100 | Over this point (in px) when you release the control the onRelease() function will be called. When reaching this point as well, the text message with info in data-release will be changed. While this point is not reached, the data-pull text will be showed. Finally, after release, data-loading will be the text message in the control |
Name | Description |
---|---|
on() | Initializes Refresh with the options you choose |
slideUp() | Hide Refresh. You have to call slur callback in order to hide the Refresh control |
var refresh = Stashy.Refresh("#myrefresh", { onRelease : function() { var self = this; $.getJSON("api/customers").done(function() { self.slideUp(); }); } }).on();
Scroll up and start dragging down
The dependency on Hammer is mandatory because this control is working with gestures or dragging down and you will need touch support.
less
For using just this component, create a .less file similar to Stashy.less, include in order the following imports and compile:
Stashy.Variables.less Stashy.Mixins.less Stashy.Refresh.lessJS
jQuery.js jquery.hammer.js Stashy.Utils.js Stashy.Modernizr.js Stashy.Refresh.js