Bootstrap Pull down event
Implementing pullDown event by jQuery with bootstrap style. PullDown is most used to refresh page by touch(drag), move down and drop finger from display.
Version 0.1.2
insert this lines to your app:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<link href="bootstrap.pull-down.css" rel="stylesheet" media="screen">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="bootstrap.pull-down.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.pullDown.start();
});
</script>
</head>
<body>
<div class="pull-down">
<a href="#" class="work"><i class="indicator-click icon-refresh icon-large"></i></a>
<i class="indicator icon-down-arrow icon-large"></i>
<i class="indicator-working icon-roundabout icon-large"></i>
<span class="pulled-label">Uvolněním aktualizovat</span>
<span class="pull-label">Stažením aktualizovat</span>
<span class="default-label">Kliknutím aktualizovat</span>
<span class="working-label">Aktualizuji</span>
<button type="button" class="close stop"><i class="icon-large icon-remove-2"></i></button>
</div>
<div style="height: 300px;" class="hero-unit">
Some text of page
</div>
</body>
</html>
API-documentation
Events:
pullDown
- if pulled down (time to refresh)
pullDownStopWorking
- if clicked to stop refreshing
Options:
container
- which element react to touches
pullDown
- the element contained the pullDown pane at top
Methods:
start(options)
- start the pullDown
enable()
- set as enabled and start (default is enabled)
disable()
- set as disabled and start (refresh pane isstatic)
loading(status)
- show loading spinner if status true or hide if status false (like pulled down event trigged)
Properties:
container
- the global container element for pullDown
element
- the pullDown element
