Cette section est close pour le moment.
Mais je n'arrête pas la veille, loin de là. Retrouvez mes projets sur Github et sur cette page qui sera à jour plus régulierement


Ressources

Définition de ressource : (nom féminin) Qui peut fournir ce dont on a besoin.
Vous l'aurez compris, sur cette page ce ne sont pas vraiment des tutoriels, c'est plutôt des penses-bêtes plus ou moins fournis mais qui vous permettront d'avoir des bases concernant la programmation.
Recherche par tag

Naviguer sans souris avec mousetrap.js

Naviguer sans souris avec mousetrap.js
Publication : Le 22/10/2012 à 01:24:39

Introduction

Avec la bibliothèque jaavscript Mousetrap vous pouvez configurer des raccourcis clavier afin de faciliter la visiter de l'internaute.

Cette pratique est peu courante mais elle est présente sur des sites, par exemple Twitter (pour charger les nouveaux tweets, en mettre en favoris, etc).

Lors de la campagne présidentielle de 2012, le candidat centriste avait même proposé un konami code sur son site.

Simplicité d'utilisation

Une fois la librairie Mousetrap chargée, vous n'aurez plus qu'à paramétrer les raccourcis clavier voulus.

Pour cela nous allons utiliser la fonction bind() en passant la combinaison de touche en paramètre.

Si la combinaison est détectée, le code s’exécutera.
<script>
Mousetrap.bind('combinaison de touche', function() {
// Votre action
});
</script>

Exemple avec une touche

Quand vous êtes sur la page ressource de mon site, vous pouvez accéder à la page ressource précédente en tapant sur B et la page suivante en tapant sur N.

Pour cela j'ai du mettre en place le code suivant :
<script>
Mousetrap.bind('b', function() 
{
document.location.href="ressources/page-<?php echo $previous ?>/";
}
);
Mousetrap.bind('n', function() 
{
document.location.href="ressources/page-<?php echo $next ?>/";
}
);
</script>
Dans cet exemple il faut bien sûr faire une vérification, est ce que la page demandée existe.

Exemple avec plusieurs touches

Si vous souhaitez travailler sur des combinaisons de touche vous n'avez qu'à les séparer d'un espace.
<sctipt>
Mousetrap.bind('a b c', function() {
    alert('Tu as tapé A B C');
});
</script>

Conclusion

Cette librairie est très légère et très simple d'utilisation.

N'hésitez pas à vous référer à sa documentation pour en apprendre plus sur cet outil.

Sur le même thème

Naviguer sans souris avec mousetrap.js
Publication : Le 22/10/2012 à 01:24:39

Tags

Tag : PHP

Suggestion :

Manipulation des fichiers CSV

Manipulation des fichiers CSV