Pull to refresh jQuery plugin for mobile and desktop with CSS animation. Extremely simple usage. Asynchronous stop. Fully customizable. Material design included.
Include script and style sheet into you page:
<script src="path/to/plugin/mk-pullfresh.min.js" type="text/javascript"></script> <link href="path/to/plugin/mk-pullfresh.min.css" rel="stylesheet">
Then initialize mkPullFresh on element you want to pull by one of the ways:
Pull this text down by mouse or finger and drop it to refresh content of the box.
Clickable Clickable element is to show, that all events are workable inside pulled element. It must change color from gray to green. Default swipe is workable too. You can scroll overflowed text with touch devices, mkPullFresh works only from the top of element.
Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text.
$('.pulled').mkPullFresh();
$('.pulled').mkPullFresh(function(end){ // some code, may be async end(); // stop pending state of pull indicator });
$('.pulled').mkPullFresh(options);
Don't forget to call end() from your callback to stop pending state of mkPullFresh
option | default | description |
---|---|---|
maxShift | 100 | maximum offset in pixels to pull element down |
readyShift | 50 | offset in pixels to be ready for refresh |
pendingShift | 50 | offset in pixels in pending state |
refresh | 1500 | Callback function or milliseconds. Function will be called with only arg - end. End - is a function you have to call to stop pending state of mkPullFresh. 'this' arg will be a mkPullFresh instance. |
indicatorHtml | '' | Html code of pull-to-refresh indicator |
emitEvents | false |
if true, will emit following events on puller:
|
Apply mkPullFresh to block you want to pull. Attribute data-mkpf-state will be added to it with initial value 'idle'. Also will be prepended div.mk-pullfresh-bubble with initial height 0, with indicator inside. When you pull the block, you increase height of div.mk-pullfresh-bubble, shifting down the content. data-mkpf-state changes its value depending on state: idle>active>ready>pending>idle
If you set option emitEvents to true, then events will be emitted on puller element.
Pull this text down by mouse or finger and drop it to refresh content of the box.
Clickable Clickable element is to show, that all events are workable inside pulled element. It must change color from gray to green. Default swipe is workable too. You can scroll overflowed text with touch devices, mkPullFresh works only from the top of element.
Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text.
$('#puller').mkPullFresh({ emitEvents: true }) .on('mkPullFreshStart', function(e,y,pf) {mylog('start.');}) .on('mkPullFreshPull', function(e,y,pf) {mylog('start. pull('+y+'). ');}) .on('mkPullFreshPending',function(e,end,pf){mylog('pending. ',true);setTimeout(end,1000)}) .on('mkPullFreshEnd', function(e,pf) {mylog('end.',true);});
event | arguments | description |
---|---|---|
mkPullFreshStart | jqEvent, yOffset, plugin | when pull starts |
mkPullFreshPull | jqEvent, yOffset, plugin | on every pointer (finger) movement |
mkPullFreshPending | jqEvent, end, plugin | when puller dropped, do refresh code here, don't forget to call end() |
mkPullFreshEnd | jqEvent, plugin | when pull or pending state ends |
Events gets plugin instance as argument. Some of the properties:
property | type | description |
---|---|---|
options | object | options of current instance |
$puller | jQuery | pulled element |
puller | DOMElelmnt | pulled element |
$container | jQuery | puller parent |
$bubble | jQuery | div.mk-pullfresh-bubble with indicator inside |
bubble | DOMElelmnt | div.mk-pullfresh-bubble with indicator inside |
pointer | object |
current pointer state:
|
You can fully change look and behavior of indicator. Set another html for indicator in options.indicatorHtml. Set context styles depending on attribute data-mkpf-state
Pull this text down by mouse or finger and drop it to refresh content of the box.
Clickable Clickable element is to show, that all events are workable inside pulled element. It must change color from gray to green. Default swipe is workable too. You can scroll overflowed text with touch devices, mkPullFresh works only from the top of element.
Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text.
<div class="mkpf-envelop"> <div class="active">pull down</div> <div class="ready">drop to refresh</div> <div class="pending">pending ...</div> </div>
$('#custom1El .puller').mkPullFresh({ indicatorHtml: '<div class="mkpf-envelop"><div class="active">pull down</div><div class="ready">drop to refresh</div><div class="pending">pending ...</div></div>', pendingShift: 35 });CSS styles
.custom-puller .mkpf-envelop div{ display: none; } .custom-puller[data-mkpf-state=active] .active{ display: block; } .custom-puller[data-mkpf-state=ready] .ready{ display: block; } .custom-puller[data-mkpf-state=pending] .pending{ display: block; } .custom-puller[data-mkpf-state=active] .mk-pullfresh-bubble{ background-color: #ddd; } .custom-puller[data-mkpf-state=ready] .mk-pullfresh-bubble{ background-color: #ffffcc; } .custom-puller[data-mkpf-state=pending] .mk-pullfresh-bubble{ background-color: #ccffcc; }
Another approach is to pull only indicator, but not to pull text, like in mobile Chrome. It's much better for performance, movements looks smoother on mobile devices. It can be done just with CSS. This styles are already included. Just add mkpf-material class to puller.
Pull this text down by mouse or finger and drop it to refresh content of the box.
Clickable Clickable element is to show, that all events are workable inside pulled element. It must change color from gray to green. Default swipe is workable too. You can scroll overflowed text with touch devices, mkPullFresh works only from the top of element.
Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text. Just overflowed text.
.mkpf-material{ position: relative; user-select: none; } .mkpf-material .mk-pullfresh-bubble{ position: absolute; width: 100%; } .mkpf-material .mkpf-indicator-wrapper{ background-color: #fff; display: inline-block; width: 40px; height: 40px; padding:3px; border-radius: 50%; border: 1px solid #ddd; box-shadow: 2px 0px 10px rgba(0,0,0,.4); }
Don't apply constrains to height with auto scrolls directly to puller. If you want to put scrollable text into constrained blocks like here in examples, wrap it with additional block with constrained height, but don't apply height constrains to the puller.