Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: jQuery Conitextmenu

  1. #1
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard jQuery Conitextmenu

    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:
    Code:
    $(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:
    contextenu.PNG
    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:
    Code:
    $(selector).jContextMenu({...elemente...}, {    
    });
    für das 2te argument gilt:
    Code:
    {     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:
    Code:
    {     show: function(ui) {         $(ui).slideDown(1000);     },     hide: function(ui) {         $(ui).slideUp(1000);     }
    Hier noch die Standardwerte für diese Optionen:

    Code:
    {     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:

    Code:
    {     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.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Tobse (13.06.2011 um 18:55 Uhr)
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  2. #2
    Fortgeschrittene/r Avatar von unknownsoldier
    Registriert seit
    16.06.2010
    Ort
    "Dreamland"
    Alter
    26
    Beiträge
    174
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: jQuery Conitextmenu

    Das sieht ja alls ganz hübsch aus und ist bestimmt auch nützlich, was ich mich Frage: Warum Jquery und nicht mit reinem CSS ?

  3. #3
    Meister(in) Avatar von Teron Gerofied
    Registriert seit
    26.01.2008
    Ort
    serverraum
    Alter
    26
    Beiträge
    347
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: jQuery Conitextmenu

    In Chrome 11.0.696 wird auch das "normale" Kontextmenü geöffnet, dass dann darüber liegt. Aber ich schätze bei manchen Browsern kann man dagegen wohl nix machen.
    PHP-Code:
    if(isset($this) || !isset($this)){ // that's the question... 

  4. #4
    Kaiser(in)
    Themenstarter

    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: jQuery Conitextmenu

    Erstmal danke für das Positive Feedback!
    @macrosdesign:
    Rein mit CSS wäre schon nice, allerdings macht am ende nur JS davon gebrauch, da man mit CSS ja nix richtiges Programmieren kann. Und wenn, hätte man dann mit CSS nicht auch die Probleme, die man jetzt mit JS hat?
    EDIT:
    upps, hab gelesen 'warum js'
    Hier warum mit jQuery:
    JQuery ist mehr Crossbrowser als CSS3 (bzgl. Einiger Bugs im IE 7+.
    Und mit jQuery ist ebenfalls crossbrowser der CSS Selektor verfügbar, DOM.querySelector(); ist ja HTML5 und leider längst noch kein Standart.

    @teron Leider nein, zuminest fällt mir da keine möglichkeit ein. Ich kenne da nur event.stopPropagation(), ist aber schon drin
    Geändert von Tobse (13.06.2011 um 01:51 Uhr)
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  5. #5
    Meister(in) Avatar von Teron Gerofied
    Registriert seit
    26.01.2008
    Ort
    serverraum
    Alter
    26
    Beiträge
    347
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: jQuery Conitextmenu

    Beim GMX Mediencenter funktionierts im Browser (auch in Chrome), dass sie das Kontextmenü unterdrücken.

    EDIT:
    Vielleicht wäre es sinnvoller statt auf stopPropagation() zurückzugreifen dem Dokument ein click-Event zuzuweisen und dann den Eventparameter auf die geklickte Maustaste überprüfen, also if(e.button == 3) return false; ??
    Geändert von Teron Gerofied (13.06.2011 um 11:16 Uhr)
    PHP-Code:
    if(isset($this) || !isset($this)){ // that's the question... 

  6. #6
    Kaiser(in)
    Themenstarter

    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: jQuery Conitextmenu

    Das muss ich mal ausprobieren. Muss mal schaun, inwiefern die Rückgabewerte durch jQuery durchkommen, sollten aber schon.
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  7. #7
    Unregistriert
    Gast

  8. #8
    Kaiser(in)
    Themenstarter

    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: jQuery Conitextmenu

    Ich hab doch geschrieben, dass es da viele von gibt. Ich hab das auch nicht geschrieben, damit ich eins habe, weils sonst keins gäbe, sondern weil ich in JS nicht so stark bin und es als herausforderung gesehen habe.
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  9. #9
    Fortgeschrittene/r Avatar von unknownsoldier
    Registriert seit
    16.06.2010
    Ort
    "Dreamland"
    Alter
    26
    Beiträge
    174
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: jQuery Conitextmenu

    Wäre es nicht sinnvoller einfach eine "Programmoberfläche" zu bauen die dir so ein Menü zusammenschraubt aber die Funktion des Menüs einfach nur mit CSS funktioniert.. das geht nämlich auch schon mit CSS 2 ..

  10. #10
    Meister(in) Avatar von Teron Gerofied
    Registriert seit
    26.01.2008
    Ort
    serverraum
    Alter
    26
    Beiträge
    347
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: jQuery Conitextmenu

    Aber sollte meine Idee nicht funktionieren kannst du dir von dem Plugin, was der Gast da geschickt hat, anschauen, wie die das "richtige" Kontextmenü verbergen, weil das wird im Chrome auch verborgen.

    Ansonsten übrigens sehr schönes Plugin
    PHP-Code:
    if(isset($this) || !isset($this)){ // that's the question... 

Ähnliche Themen

  1. [jQuery] Div ein/ausblenden
    Von goldeneye im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 28.05.2011, 12:24
  2. jquery fehler IE8
    Von naggison im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 10
    Letzter Beitrag: 11.04.2011, 11:06
  3. DIV via jQuery erstellen
    Von XantypiaxD im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 06.02.2011, 13:37
  4. jQuery Frage
    Von ninom im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 18.08.2010, 20:30
  5. JQuery-prob
    Von synaptic im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 12
    Letzter Beitrag: 18.04.2008, 20:51

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •