Jedes kennt es von seinem mobilen Endgerät. Die bequeme Pull-To-Refresh Funktion, die viele Apps verwenden, kann jetzt auch schnell und einfach in deine Seite integriert werden. Mithilfe von hook.js.
Das funktioniert genau so wie man es in den Apps geht. Scrollt man weit genug nach oben wird der Refresh des Browsers ausgelöst. Die ganz die komplette Seite aktualisieren oder aber nur ein bestimmten Bereich der Seite. Damit der Besucher das auch visuell mitgeteilt bekommt, wird genau so wie in den Apps ein Loader oberhalb der Website angezeigt.
Damit das ganze bei euch funktioniert, müsst ihr lediglich die hook.js, die hook.css und eine aktuelle jQuery Version einbinden. Diese findet ihr auf der Projektseite.
<script src="http://code.jquery.com/jquery-latest.js" type="textjavascript"></script><link rel="stylesheet" href="hook/hook.css" type="text/css" /><script src="hook/hook.js" type="text/javascript"></script>
Dazu noch ein bisschen HTML und schon ist das Pull-To-Refresh Feature in eure Seite integriert.
<div id="hook">
<div id="loader">
<div class="spinner"></div>
</div>
<span id="hook-text">Reloading...</span>
</div>
Viel Spaß damit!