Skip to content
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.
CSS JavaScript
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
bootstrap.icon
build fix rotating for firefox (mozilla)
less
.gitignore
README.md fix rotating for firefox (mozilla)
bower.json bower init conf
preview.jpg preview image
sandbox.html repair of sandbox.html

README.md

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

Something went wrong with that request. Please try again.