Pull to refresh

Pull to refresh is a special component that can be used to initiate the refreshing of a page’s contents.

demo

HTML:

Pull to refresh

card

Hello there! I am a card;

{% highlight html %}

Pull to refresh

card

Hello there! I am a card;

{% endhighlight %}

javascript:

{% highlight js %} $(document).on('refresh', '.pull-to-refresh-content',function(e) { setTimeout(function() { var cardHTML = '

' + '

New Card

' + '

' + 'Hello! I am the new card!'+(Math.random()*1000000)+ '

' + '

'; $(e.target).find('.card').replaceWith(cardHTML); // done $.pullToRefreshDone('.pull-to-refresh-content'); }, 2000); }); {% endhighlight %}

Where

page-content should have additional pull-to-refresh-content class. This is required to enable pull to refresh
pull-to-refresh-layer hidden layer with pull to refresh visual elements: preloader and arrow.
data-ptr-distance="55" additional attribute that allows to set custom pull to refresh trigger distance. By default (if not specified) it is 44px.

Pull To Refresh Sequence

When user starts to pull pull-to-refresh-content down, then pull-to-refresh-layer will receive additional "pull-down" class.

When user pulls down pull-to-refresh-content on a distance more than 44px (when pull-to-refresh-layer will be fully visible), then pull-to-refresh-layer will receive additional "pull-up" class which changes arrow rotation to notify user about refresh action on release.

When user release pull to refresh content when it is in "pull-up" state, then pull-to-refresh-layer will receive additional "refreshing" class. In "refreshing" state arrow will be hidden and user will see preloader indicator. On this stage you probably need to do Ajax request and refresh page content.

Pull To Refresh Events

There is a special JavaScript event that helps us to recognize when we need to refresh content:

Event	Target	Description
refresh	Pull To Refresh content<div class="pull-to-refresh-content">	Event will be triggered when pull to refresh enters in "refreshing" state

Reset Pull To Refresh

After we refreshed page content, we need to reset pull to refresh component to let user pull it again:

{% highlight html %} $.pullToRefreshDone(ptrContent) {% endhighlight %}

Trigger Pull To Refresh

We can also trigger Pull To Refresh manually by using the following method:

{% highlight html %} $.pullToRefreshTrigger(ptrContent) {% endhighlight %}

Destroy/Disable Pull To Refresh

Sometimes you may need to disable Pull To Refresh on page. We can do that using the following method:

{% highlight html %} $.destroyPullToRefresh(ptrContent) {% endhighlight %}

And if we need to initialize/enable it again:

{% highlight html %} $.initPullToRefresh(ptrContent) {% endhighlight %}

See demos for how to use pull to refresh with tabs.