Developpez.com

Club des développeurs et IT pro
Plus de 4 millions de visiteurs uniques par mois

hook.js : rafraichissez vos pages Web par un simple scroll

Le , par FirePrawn, Expert éminent sénior
Les utilisateurs de smartphones et de tablettes connaissent bien cette fonctionnalité qui consiste à rafraichir une page en la "tirant" avec le doigt.
Le côté pratique de cette fonctionnalité est admis par tous dans la mesure où ces utilisateurs ne disposent ni de souris ni de clavier.

Pourquoi les utilisateurs d'ordinateur ne pourraient-ils pas eux aussi rafraichir les pages Web par un simple mouvement de souris ?
Et bien c'est maintenant possible grâce à cette librairie JavaScript !

Hook.js est très simple d'utilisation. Première étape vous devez bien évidemment télécharger les fichiers (JavaScript, CSS) et les inclure dans votre page :
Code html : Sélectionner tout
1
2
3
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
<link rel="stylesheet" href="hook/hook.css" type="text/css" /> 
<script src="hook/hook.js" type="text/javascript"></script>

Ensuite vous avez juste à ajouter les class correspondante à Hook.js à vos <div> :
Code html : Sélectionner tout
1
2
3
4
5
6
<div id="hook"> 
	<div id="loader"> 
		<div class="spinner"></div> 
	</div> 
	<span id="hook-text">Reloading...</span> 
</div>

Et le tour est joué ! Vous pouvez maintenant rafraichir vos pages par un simple scroll down/scroll up qui simule le "pull".

Télécharger Hook.js.

Source : usehook.com

Et vous ?

Avez-vous déjà géré des rafraichissements de pages de façon inhabituelle ?
Pensez-vous que le "pull to refresh" est utile pour les utilisateurs ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de poringkiller poringkiller - Membre du Club https://www.developpez.com
le 01/03/2013 à 16:42
Je ne vois pas l’intérêt sur desktop, le seul avantage sur mobile est d'éviter de prendre de la place sur l'interface avec un bouton "rafraîchir".
Hook.js demande d'effectuer un mouvement vers le haut avant de tirer la page vers le bas, ce qui ne colle pas au modèle d'utilisation du pull to refresh sur mobile.
Avatar de FirePrawn FirePrawn - Expert éminent sénior https://www.developpez.com
le 01/03/2013 à 16:45
C'est l'inverse

Il faut d'abord faire un scroll down pour ensuite faire un scroll up (simulation du pull sur mobile/tablette donc).
Offres d'emploi IT
RESPONSABLE WEB ANALYTICS F/H
VACALIANS GROUP - Languedoc Roussillon - SETE (34)
Développeur WEB PHP F/H
VACALIANS GROUP - Languedoc Roussillon - SETE (34)
Développeur Web FULL-STACK
VACALIANS GROUP - Languedoc Roussillon - SETE (34)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -