Je sais que cette question est très ancienne, mais je viens de trouver le même problème et de le résoudre moi-même, donc je réponds au cas où quelqu'un trouverait cela via Google comme je l'ai fait. J'ai basé ma solution sur celle de @ Andrew, mais j'ai tout modifié par la suite.
EDIT : vu à quel point cela a été populaire ces derniers temps, j'ai décidé de mettre à jour également les styles pour le faire ressembler davantage à 2014 et moins à Windows 95. J'ai corrigé les bogues @Quantico et @Trengot repérés donc maintenant c'est une réponse plus solide.
EDIT 2 : Je l'ai configuré avec StackSnippets car c'est une nouvelle fonctionnalité vraiment cool. Je laisse le bon jsfiddle ici pour référence (cliquez sur le 4ème panneau pour les voir fonctionner).
Nouvel extrait de pile:
// JAVASCRIPT (jQuery)
// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".custom-menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide(100);
}
});
// If the menu element is clicked
$(".custom-menu li").click(function(){
// This is the triggered action name
switch($(this).attr("data-action")) {
// A case for each action. Your actions here
case "first": alert("first"); break;
case "second": alert("second"); break;
case "third": alert("third"); break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide(100);
});
/* CSS3 */
/* The whole thing */
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
padding: 0;
}
/* Each of the items in the list */
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
list-style-type: none;
transition: all .3s ease;
user-select: none;
}
.custom-menu li:hover {
background-color: #DEF;
}
<!-- HTML -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<ul class='custom-menu'>
<li data-action="first">First thing</li>
<li data-action="second">Second thing</li>
<li data-action="third">Third thing</li>
</ul>
<!-- Not needed, only for making it clickable on StackOverflow -->
Right click me
Remarque: vous pouvez voir quelques petits bugs (liste déroulante loin du curseur, etc.), veuillez vous assurer que cela fonctionne dans jsfiddle , car cela ressemble plus à votre page Web que StackSnippets pourrait l'être.
Francisco Presencia
la source
Comme l'a dit Adrian, les plugins fonctionneront de la même manière. Vous aurez besoin de trois éléments de base:
1: gestionnaire d'
'contextmenu'événements pour l' événement:Ici, vous pouvez lier le gestionnaire d'événements à n'importe quel sélecteur pour lequel vous souhaitez afficher un menu. J'ai choisi l'ensemble du document.
2: Gestionnaire d'
'click'événements pour l' événement (pour fermer le menu personnalisé):3: CSS pour contrôler la position du menu:
L'important avec le CSS est d'inclure le
z-indexetposition: absoluteIl ne serait pas trop difficile d'envelopper tout cela dans un plugin jQuery astucieux.
Vous pouvez voir une démo simple ici: http://jsfiddle.net/andrewwhitaker/fELma/
la source
event.targetintérieur de la liaison de clic sur ledocument. Si ce n'est pas dans le menu contextuel, masquez le menu: jsfiddle.net/fELma/286la source
voici un exemple de menu contextuel clic droit en javascript: Menu contextuel clic droit
Code javasScript brut utilisé pour les fonctionnalités du menu contextuel. Pouvez-vous s'il vous plaît vérifier ceci, j'espère que cela vous aidera.
Code en direct:
la source
Le menu contextuel du navigateur est remplacé. Il n'y a aucun moyen d'augmenter le menu contextuel natif dans les principaux navigateurs.
Puisque le plugin crée son propre menu, la seule partie qui est vraiment abstraite est l'événement du menu contextuel du navigateur. Le plugin crée un menu html basé sur votre configuration, puis place ce contenu à l'emplacement de votre clic.
Oui, c'est la seule façon de créer un menu contextuel personnalisé. De toute évidence, différents plugins font les choses légèrement différentes, mais ils remplaceront tous l'événement du navigateur et placeront leur propre menu basé sur HTML au bon endroit.
la source
Vous pouvez regarder ce tutoriel: http://www.youtube.com/watch?v=iDyEfKWCzhg Assurez-vous que le menu contextuel est masqué au début et a une position absolue. Cela garantira qu'il n'y aura pas de menu contextuel multiple et de création inutile de menu contextuel. Le lien vers la page est placé dans la description de la vidéo YouTube.
la source
Je sais que c'est assez vieux aussi. J'ai récemment eu besoin de créer un menu contextuel que j'injecte dans d'autres sites qui ont des propriétés différentes en fonction de l'élément cliqué.
C'est plutôt difficile, et il existe probablement de meilleures façons d'y parvenir. Il utilise la bibliothèque de menu contextuel jQuery située ici
J'ai aimé le créer et je pensais que vous pourriez en avoir une utilité.
Voici le violon . J'espère que cela pourra aider quelqu'un là-bas.
la source
J'ai une implémentation agréable et facile en utilisant bootstrap comme suit.
la source