Ich weiß, dass diese Frage sehr alt ist, habe aber das gleiche Problem gefunden und es selbst gelöst. Ich antworte also, falls jemand dies über Google findet, wie ich es getan habe. Ich habe meine Lösung auf die von @ Andrew gestützt, aber danach im Grunde alles geändert.
BEARBEITEN : Da dies in letzter Zeit sehr beliebt war, habe ich beschlossen, auch die Stile zu aktualisieren, damit es eher wie 2014 und weniger wie Windows 95 aussieht. Ich habe die Fehler @Quantico und @Trengot behoben, sodass es jetzt eine solidere Antwort ist.
EDIT 2 : Ich habe es mit StackSnippets eingerichtet, da sie eine wirklich coole neue Funktion sind. Ich lasse die gute jsfiddle hier als Referenzgedanke (klicken Sie auf das 4. Panel, um zu sehen, wie sie funktionieren).
Neues Stapel-Snippet:
// 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
Hinweis: Möglicherweise werden einige kleine Fehler angezeigt (Dropdown-Liste weit vom Cursor entfernt usw.). Stellen Sie sicher, dass dies in der jsfiddle funktioniert , da dies Ihrer Webseite ähnlicher ist als StackSnippets.
Francisco Presencia
quelle
Wie Adrian sagte, werden die Plugins genauso funktionieren. Es gibt drei grundlegende Teile, die Sie benötigen werden:
1: Ereignishandler für
'contextmenu'Ereignis:Hier können Sie den Ereignishandler an einen beliebigen Selektor binden, für den Sie ein Menü anzeigen möchten. Ich habe das gesamte Dokument ausgewählt.
2: Ereignishandler für
'click'Ereignis (um das benutzerdefinierte Menü zu schließen):3: CSS zur Steuerung der Position des Menüs:
Das Wichtigste beim CSS ist, das
z-indexund einzuschließenposition: absoluteEs wäre nicht allzu schwierig, all dies in ein schickes jQuery-Plugin zu packen.
Eine einfache Demo finden Sie hier: http://jsfiddle.net/andrewwhitaker/fELma/
quelle
event.targetInnere der Klickbindung auf dem ansehendocument. Wenn es nicht im Kontextmenü ist, verstecken Sie das Menü: jsfiddle.net/fELma/286quelle
hier ist ein Beispiel für die rechte Maustaste im Kontextmenü in javascript: Rechtsklick - Kontextmenü
Verwendeter roher JavasScript-Code für die Kontextmenüfunktionalität. Können Sie dies bitte überprüfen, hoffen Sie, dass dies Ihnen helfen wird.
Live-Code:
quelle
Das Kontextmenü des Browsers wird überschrieben. Es gibt keine Möglichkeit, das native Kontextmenü in einem größeren Browser zu erweitern.
Da das Plugin ein eigenes Menü erstellt, wird nur das Kontextmenü des Browsers abstrahiert. Das Plugin erstellt basierend auf Ihrer Konfiguration ein HTML-Menü und platziert diesen Inhalt an der Stelle Ihres Klicks.
Ja, nur so können Sie ein benutzerdefiniertes Kontextmenü erstellen. Natürlich machen verschiedene Plugins etwas andere Dinge, aber sie alle überschreiben das Ereignis des Browsers und platzieren ihr eigenes HTML-basiertes Menü an der richtigen Stelle.
quelle
Sie können dieses Tutorial ansehen: http://www.youtube.com/watch?v=iDyEfKWCzhg Stellen Sie sicher, dass das Kontextmenü zuerst ausgeblendet ist und eine absolute Position hat. Dadurch wird sichergestellt, dass es nicht mehrere Kontextmenüs und keine nutzlose Erstellung von Kontextmenüs gibt. Der Link zur Seite befindet sich in der Beschreibung des YouTube-Videos.
quelle
Ich weiß, dass das auch ziemlich alt ist. Vor kurzem musste ich ein Kontextmenü erstellen, das ich in andere Sites einfüge, die je nach angeklicktem Element andere Eigenschaften haben.
Es ist ziemlich rau und es gibt wahrscheinlich bessere Möglichkeiten, dies zu erreichen. Es verwendet das jQuery-Kontextmenü Bibliothek hier
Ich habe es genossen, es zu kreieren und obwohl ihr vielleicht etwas davon habt.
Hier ist die Geige . Ich hoffe, dass es hoffentlich jemandem da draußen helfen kann.
quelle
Ich habe eine schöne und einfache Implementierung mit Bootstrap wie folgt.
quelle