Créer un menu contextuel avec jQuery

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 clavier 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.

• 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.

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

• Internet Explorer 6 et 7 ;
• Firefox 2 et 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.

Vous pouvez voir une démonstration du menu contextuel.

Version actuelle : 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-A. Dépendances▲

VI-B. Création▲

<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>

$(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)'
            );
    });
   
});

VI-C. Méthodes▲

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

VI-D. Styliser▲

VI-E. Callback▲

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

Vous pouvez aussi aller voir mes autres publications.