Refresh

Pull to refresh component aiming ajax content loading

  Download   View project on Github

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>

Constructor

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

Options

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

Methods

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

Sample

var refresh = Stashy.Refresh("#myrefresh", { 
    onRelease : function() {
        var self = this;
        $.getJSON("api/customers").done(function() {
            self.slideUp();
        });
    }
}).on();	

Pull to refresh

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.less

JS

jQuery.js jquery.hammer.js Stashy.Utils.js Stashy.Modernizr.js Stashy.Refresh.js