S’il y a bien une extension que j’installe toujours pour naviguer sur le web avec Firefox, c’est FireGesture. Celle-ci me permet d’utiliser des mouvements de souris pour réaliser rapidement des actions.
Par exemple, un clic droit suivi d’un déplacement vers la gauche reproduit l’évènement « page précédente ». De même, un mouvement bas-haut-bas réactualise la page courante. Vraiment très rapide et pratique.
Si vous éditez une application web, il peut être intéressant d’y implémenter ce genre de fonctionnalités pour la rendre plus conviviale et donc plus attractive.
jGesture est un plugin pour jQuery qui permet d’ajouter le support des mouvements de la souris sur n’importe quel site web.
Le plugin propose des « détections » par défaut mais il est possible de personnaliser selon ses besoins.
Tout est basé sur des noms d’évènements, que l’on peut utiliser seuls (topleft, top, topright, right, bottomright, bottom, bottomleft, left) ou en combinaisons (top_bottom, rotateclockwise, rotatecounterclockwise, open, close ….), sans limitation.
De plus, les mouvements ne sont détectés que lorsqu’on active le plugin. En général il s’agit d’un évènement comme le clic droit. Du coup les performances du site ne sont pas affectées par le plugin.
Passons aux travaux pratiques. Le code ci-dessous présente un exemple simple d’utilisation de base :
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" ></script>
<script src="http://jgesture.googlepages.com/jgesture-1.0.0.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#info").gesture(
function(gs){
$(this).text("Gesture : " + gs.getName() + " : " + gs.moves);
}
);
});
</script>
</head>
<body>
<div id="info" style="height:400px;width:400px;background-color:gray;color:white">make a gesture</div>
</body>
</html>
Le code précédent ne fait qu’afficher les mouvements que vous faites dans un DIV. Mais vous pouvez imaginer tous les comportements possibles sur ces évènements. Par exemple montrer ou cacher un panneau :
<script type="text/javascript">
$(document).ready(function(){
$("html").gesture(
function(gs){
if (gs.getName() == "close") {
$("#info").hide("slow");
}
if (gs.getName() == "open") {
$("#info").show("slow");
}
}
);
});
</script>
Bref, de quoi faire pleins de choses super intéressantes et pratiques. Je ne l’ai pas testé personnellement mais il semble être très bien foutu.
Téléchargez le plugin pour jQuery « jGesture » (4,73 Ko)
