Skip to content

Latest commit

 

History

History
96 lines (70 loc) · 2.77 KB

File metadata and controls

96 lines (70 loc) · 2.77 KB

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.

Preview

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