luis-kaufmann-silva/jquery-p2r

jQuery plugin for pull to refresh (p2r)

##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> -->