Skip to content
This repository has been archived by the owner. It is now read-only.
jQuery plugin for pull to refresh (p2r)
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
bower.json
jquery.p2r.js
jquery.p2r.min.js
pulltorefresh.jquery.json

README.md

GitHub version

##Download

jQuery Pull to Refresh is available to be downloaded from bower or github

Bower

$ bower install --save pulltorefresh

</div>
<div class='col-md-4 col-sm-6'>
    <h3>
        Compacted
    </h3>
    <p>
        <a href='https://github.com/luis-kaufmann-silva/jquery-p2r/archive/master.zip' class='btn btn-default btn-outline btn-lg btn-block'>
            jquery-p2r.zip
        </a>
    </p>
    
</div>
<div class='col-md-4 col-sm-6'>
    <h3>
        Source code
    </h3>
    <p>
        <a href='https://github.com/luis-kaufmann-silva/jquery-p2r' class='btn btn-default btn-outline btn-lg btn-block'>
            Github page
        </a>
    </p>
    
</div>

##Instalation##

After download it, add after jQuery

<!-- jQuery Pull to Refresh plugin -->
<script src='path/to/jquery-p2r.min.js' type='text/javascript' defer></script>

##Simple example##

A simple way to implement pull to refresh plugin

$(document).ready(function (){
    $("selector").pullToRefresh();
})

#Events

Start

Fires when the user touch or click the element (see simulateTouch)

Example:

.on("start.pulltorefresh", function (evt, y){})

Parameters:

  • evt Original event (mousedown or touchstart)
  • y Position of element on Y axis

Move

Fires when the user move the element (see sensibility)

Example:

.on("move.pulltorefresh", function (evt, percent){})

Parameters:

  • evt Original event (mousemove or touchmove)
  • percent Percentage of pull moviment based on option refresh

End

Fires when the touch event stop

Example:

.on("end.pulltorefresh", function (evt){})

Parameters:

  • evt Original event (mouseup or touchend)

Refresh

Fires when the touch distance variation of the initial point to the end point is greater or equal to refresh

Example:

.on("refresh.pulltorefresh", function ($element, y){})

Parameters:

  • $element jQuery element
  • y Position of element on Y axis

##Examples of events

All examples are hosted on codepen.io under tag jquery-p2r

##Options

You can configure some properties to better adapt the plugin to your needs

sensibility

Number of pixels to each call of "move" event

<strong>default</strong>: <code>10</code>

<div data-trigger='codepen' data-hash='cIjfy'></div>

refresh

Value in pixels to fire "refresh" event

<strong>default</strong>: <code>200</code>

<div data-trigger='codepen' data-hash='dGcfL'></div>

lockRefresh

<p>
    Indicates that the user can pull up to get the value "refresh"
</p>

<strong>default</strong>: <code>false</code>

<div data-trigger='codepen' data-hash='cpDJL'></div>

resetRefresh

<p>
    Indicates that the "reset" function will be called immediately when occur the event "refresh"
</p>

<strong>default</strong>: <code>false</code>

<div data-trigger='codepen' data-hash='hjAgz'></div>

autoInit

<p>
    Indicates that the "PullToRefresh" object must be built on startup "plugin"
</p>

<strong>default</strong>: <code>true</code>

<div data-trigger='codepen' data-hash='kzlqg'></div>

resetSpeed

<p>
    Speed of reset animation in milliseconds
</p>

<strong>default</strong>: <code>100ms</code>

<div data-trigger='codepen' data-hash='DHmIt'></div>

simulateTouch

<p>
    Simulate touch events with mouse events
</p>

<strong>default</strong>: <code>true</code>

<div data-trigger='codepen' data-hash='kKIrz'></div>

threshold

<p>
    Integer with the threshold variation of the y axis
</p>

<strong>default</strong>: <code>20</code>

<div data-trigger='codepen' data-hash='olkhw'></div>

scroll

<p>
    Selector to element scroll , this selector defines the element to be evaluated by "scrollTop()" when the event "onTouchMove" is executed. If $scroll.scrollTop() is bigger then zero, the refresh event is not executed.
</p>

<strong>default</strong>: <code>document</code>

<!-- <div data-trigger='codepen' data-hash='olkhw'></div> -->
You can’t perform that action at this time.