Hi,
ich habe auch mal (ja, da gibts schon zig' davon) ein Contextmenu mit jQuery geschrieben. Es kann beliebig verschachtelt sein und Einträge können auch mit icons versehen werden. Jeder Eintrag hat das hover und click event. Hier ein beispiel:
$(document).ready(function() {
$(".contextmenu").jContextMenu({
"Eintrag 1": {
click: function(event) {
alert("Event-Handler Click");
}
},
"Eintrag 2(hoverable)": {
hover: function(event) {
alert("hover");
}
},
"Eintrag 3": {
click: function() {
alert("Event-Handler CLick");
},
expand: {
"Eintrag 3.1": {},
"Eintrag 3.2": {
click: function() {
alert("Mit Icon!");
},
icon: "images/contextmenu/add.png",
expand: {
"Eintrag 3.1.1": {
click: function() {
alert("mit icon!");
}
}
}
}
}
}
});
});Hier ist anzumerken, dass das "click" event bei den erweiterten Einträgen nicht funktioniert.
Und so siehts am Ende aus:
Zusätzlich zu den sowieso benötigten Bildern sind noch "add.png", "delete.png" und "edit.png" als icons dabei.
Benötigt weren jQuery.jContextMenu.js und contextmenu.css (oder den Teil in eine Andere CSS).
Die Klassen, nachdenen das Menü gestaltet wird, lassen sich ebenfalls anpassen:
$(selector).jContextMenu({...elemente...}, {
});für das 2te argument gilt:
{ hoverClass: Die CSS-Klasse, die einem Menüeintrag gegeben wird, wennn sich der Mauszeiger über ihm befindet, expendClass: Die CSS-Klasse, die einem Menüeintrag gegeben wird, wenn er sich erweitern kann, iconClass: Die CSS-Klasse, die einem Menüeintrag gegeben wird, wenn er ein icon hat, iconSelfClass: Die CSS-Klasse, die dem <span>-Element, wessen Hintergrund das icon ist, gegeben wird, menuClass: Die CSS-Klasse, die den <div>´s gegeben werden, die ein Kontextmenü darstellen, openOn: Event, auf welches das Menü geöffnet werden soll, show: Wie das Menü geöffnet werden soll, hide: Wie das Menü geschlossen werden soll }Die ganzen *class dürften Klar sein.
openOn:
Hier kann "rclick", "lclick", "hover" stehen. "rlcick" ist der Rechtsclick, "lclick" demnach der Linksklick.
show:
Kann entweder "pop" sein (hier wird das Menü per display: none/block; gezeigt), eine Zahl (in dieser Zeit in Millisekunden wird das Menü "gefadet") oder ein Objekt mit 2 Funktionen, die wie folgt aussehen:
{ show: function(ui) { $(ui).slideDown(1000); }, hide: function(ui) { $(ui).slideUp(1000); }Hier noch die Standardwerte für diese Optionen:
{ hoverClass: "ui-context-hover", expendClass: "ui-context-expendable", iconClass: "ui-context-icon", iconSelfClass: "ui-icon", menuClass: "ui-contextmenu", openOn: "rclick", show: "pop", hide: "pop" }Zu guter letzt noch zu den Events. Bei hover und Click entspricht das event-Argument
demhier:
{ event: Das Event-Objekt, dass von jQuery übergeben wurde, element: Das DOM-Objekt, auf dass der Benutzer geklickt hat, mouseX: X-Koordiante vom Punkt im DOM-Objekt (element), auf den der Benutzer geklickt hat, mouseY: Y-Koordiante vom Punkt im DOM-Objekt (element), auf den der Benutzer geklickt hat }Hier noch die CSS und JS zusammen mit den Bildern und einer Demo-Datei (aus dem Screenshot):
jContextMenu.zip
Viel Spaß damit!
Feedback, bitte, immer. Aber konstruktiv bitte. Auf negatives kann ich verzichten und
werde auch nicht drauf reagieren.