Créer un menu contextuel avec jQuery

Date de publication : 7/04/2009

Par S.N. LaViska (Auteur)
 Joris Crozier (Traducteur)
 

Cet article est la traduction de jQuery Context Menu Plugin (disponible en ici)
Ceci est un plugin de menu contextuel pour jQuery dont les fonctions sont : implémentation facile, raccourcis clavier, style CSS et méthodes de contrôles.
Commentez : 1 commentaire

               Version PDF (Miroir)   Version hors-ligne (Miroir)

I. Présentation
II. Fonctions
III. Compatibilité
IV. Démo
V. Téléchargement
VI. Utilisation
VI-1. Dépendances
VI-2. Création
VI-3. Méthodes
VI-4. Styliser
VI-5. Callback
VII. Licence et Termes d'utilisation
VIII. Liens


I. Présentation

Ce menu contextuel est un plugin jQuery qui a été créé pour que son implémentation soit facile et qu'il requiert très peu d'efforts pour le configurer.
Il existe un autre menu contextuel pour jQuery écrit par Chris Domigan.
Ces deux projets n'ont aucun lien et aucun code source n'est distribué sur le projet de Chris.
Pourquoi réinventer la roue ? Le but de ce plugin est de rationaliser la manière dont les actions sont liées aux éléments de menus et d'utiliser à 100% du CSS pour le style.
Les raccourcis claviers ont été ajoutés pour naviguer dans les menus une fois ceux-ci ouverts, il existe cinq méthodes vous permettant de contrôler et de nettoyer les menus contextuels à la volée.


II. Fonctions

  • XHTML valide
  • Entièrement personnalisable grâce au CSS
  • Facile à implémenter et configurer
  • Dégradé gracieux
  • Les raccourcis clavier maximisent l'accessibilité
  • Possibilité d'activer/désactiver des éléments de menu à la volée
  • Possibilité d'activer/désactiver des menus à la volée

III. Compatibilité

Ce menu contextuel fonctionne sur tous les navigateurs qui supportent jQuery. Il a été testé entièrement dans :

  • Internet Explorer 6 & 7
  • Firefox 2 & 3
  • Safari 3
  • Chrome (bêta)
  • Opera 9.5*
*Opera 9.5 possède une option qui autorise les scripts à détecter le clic droit, mais elle est désactivée par défaut. En outre, Opera ne permet toujours pas à JavaScript de désactiver le menu contextuel par défaut du navigateur, ce qui cause des conflits à l'usage.


IV. Démo

Vous pouvez voir une démonstration du menu contextuel


V. Téléchargement

Version actuelle : srcs Version 1.0 (14 Septembre 2008)
Le plugin vous est fourni tel quel, sans aucun prix. Si vous voulez supporter son développement, soyez libre de donner le montant qu'il vous plaira via Paypal. Comme toujours, vous êtes les bienvenus pour la contribution de code, résolution de bugs, ainsi que d'éventuelles évolutions. Quoi qu'il en soit, merci de nous encourager.


VI. Utilisation


VI-1. Dépendances

Le menu contextuel requiert en jQuery 1.2.6 ou plus (ou jQuery 1.2 avec le plugin Dimensions).


VI-2. Création

D'abord, créez une liste dans votre HTML qui sera la base de votre menu contextuel. 

<ul id="myMenu" class="contextMenu">
    <li class="edit">
        <a href="#edit">Edition</a>
    </li>
    <li class="cut separator">
        <a href="#cut">Couper</a>
    </li>
    <li class="copy">
        <a href="#copy">Copier</a>
    </li>
    <li class="paste">
        <a href="#paste">Coller</a>
    </li>
    <li class="delete">
        <a href="#delete">Supprimer</a>
    </li>
    <li class="quit separator">
        <a href="#quit">Quitter</a>
    </li>
</ul>
Les actions sont spécifiées dans l'attribut href, précédées par le symbole #.
Quand elles sont sélectionnées, c'est ceci qui est envoyé au paramètre action du callback.
Vous pouvez ajouter des attributs de classe à la liste des éléments pour aider à styliser (NDT : le menu), mais ils n'auront aucun sens pour les fonctionnalités. Ces noms de classe ne doivent pas correspondre aux noms des actions.

Une fois que vous avez créé la base du menu contextuel, liez-le à un ou plusieurs éléments en JavaScript : 

$(document).ready( function() {
   
    $("#selector").contextMenu({
        menu: 'myMenu'
    },
        function(action, el, pos) {
        alert(
            'Action: ' + action + 'nn' +
            'Element ID: ' + $(el).attr('id') + 'nn' +
            'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)nn' +
            'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
            );
    });
   
});
Soyez sûr d'avoir changé #selector avec les selecteurs jQuery appropriés qui correspondent aux éléments que vous voulez lier dans le menu contextuel.
Le sélecteur peut être n'importe quel sélecteur jQuery valide.


VI-3. Méthodes

Il existe 5 méthodes que vous pouvez utiliser pour contrôler et nettoyer le menu contextuel une fois celui-ci instancié.

Méthodes Descriptions
disableContextMenu() Désactive le menu contextuel de tous les éléments correspondants
enableContextMenu() Re-active le menu contextuel de tous les éléments correspondants
disableContextMenuItems('#option1,#option2,...') Désactive les options spécifiées sur les éléments correspondants. Si null est passé, tous les éléments sont désactivés
enableContextMenuItems('#option1,#option2,...') Active les options spécifiées sur les éléments correspondants. Si null est passé, tous les éléments sont activés
destroyContextMenu() Rompt la connexion entre le menu contextuel et les éléments correspondants
 

En guise d'exemple, pour désactiver le menu contextuel sur un élément div qui a pour ID myDiv, le code doit ressembler à ceci : 

$("#myDiv").disableContextMenu();

VI-4. Styliser

Le menu contextuel s'appuie à 100% sur du CSS pour le style . Pour donner aux utilisateurs une expérience esthétique plaisante, vous devrez aussi inclure les feuilles CSS ou créer les votres.
Référez-vous au fichier jquery.contextMenu.css pour faire des changements dans le style.


VI-5. Callback

La fonction de Callback s'active si et seulement si un utilisateur fait un choix valable à partir du menu contextuel. Trois arguments sont passés et vous pouvez les utiliser pour contrôler ce qui se passe lorsque l'utilisateur fait un choix.

Paramètres Descriptions
action L'action qui correspond à l'élément de menu qui à été sélectionné (I.E. l'attribut href moins le symbole #)
el L'élément objet qui a déclenché le menu contextuel
pos.x La position horizontale du pointeur de la souris lorsque l'élément a été cliqué (relative à l'élément)
pos.y La position verticale du pointeur de la souris lorsque l'élément a été cliqué (relative à l'élément)
pos.docX La position horizontale du pointeur de la souris lorsque l'élément a été cliqué (relative au document)
pos.docY La position verticale du pointeur de la souris lorsque l'élément a été cliqué (relative au document)
 

Voyez l'exemple précédent pour le code.


VII. Licence et Termes d'utilisation

Le menu contextuel est sous la licence en Creative Commons License et le copyright est ©2008 par Cory S.N. LaViska.


VIII. Liens

Vous pouvez aussi aller voir mes autres fr publications.



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

Les sources présentées sur cette page sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2009 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.

Vos questions techniques : forum d'entraide JavaScript - Publiez vos articles, tutoriels et cours
et rejoignez-nous dans l'équipe de rédaction du club d'entraide des développeurs francophones
Nous contacter - Hébergement - Participez - Copyright © 2000-2010 www.developpez.com - Legal informations.