Créer un menu contextuel avec jQuery

| S.N. LaViska | Joris Crozier |

Cet article est la traduction de jQuery Context Menu Plugin (disponible 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 : Commentez ♪

- Titre : Créer un menu contextuel avec jQuery

- Auteurs : S.N. LaViska , Joris Crozier

- Parution : 7 avril 2009

- Licence : 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 œuvre intellectuelle protégée par les droits d'auteur. 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'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Présentation

- II. Fonctions

- III. Compatibilité

- IV. Démo

- V. Téléchargement

- VI. Utilisation

- VI-A. Dépendances

- VI-B. Création

- VI-C. Méthodes

- VI-D. Styliser

- VI-E. 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 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.

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

IV - Démo

Vous pouvez voir une démonstration du menu contextuel.

V - Téléchargement

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

VI-A - Dépendances

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

VI-B - 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 sélecteurs 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-C - Méthodes

Il existe cinq 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()

Reactive 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-D - 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 vôtres.
Référez-vous au fichier jquery.contextMenu.css pour faire des changements dans le style.

VI-E - 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 a é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 Creative Commons License et le copyright est ©2008 par Cory S.N. LaViska.

VIII - Liens

Vous pouvez aussi aller voir mes autres publications.