tutorials.de Buch-Aktion 05/2012
  • Webmaster & Internet

    Webmaster & Internet
  • Ein kleines Kontext Menü mit Prototype

    Ich werde nur die Codes posten und anhand der Kommentaren sollte dann klar sein was damit gemacht wird. Viel Spass. MIt dem Schnippsel

    Code javascript:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    
    var _contextMenuVisible = false;    // Ist das Context Menü sichtbar
    var _contextMouseWasOver = false;   // War die Maus schon auf dem Menü
    /* Die Position (sind Selbs erklärend) */
    var _contextCurrentX = 0;           
    var _contextCurrentY = 0;           
    var _contextCurrentWidth=0;
    var _contextCurrentHeight=0;
     
     
    // Beim Laden das Kontext Menu vorbereiten
    Event.observe(window, 'load', function(){
        initContextMenu();
    });
     
    /* window bekommt den Event mouseover und ruft _checkCoord() */
    Event.observe(window, 'mousemove', function(e){
        _checkCoord(e.clientX, e.clientY);
    });
     
     
    function initContextMenu(){
        // hide kontextMenu
        $$('.kontext-menu-link').each(function(elem){
            elem.setAttribute("onmouseover","showContextMenu(this)");
        }); 
        
        _hideContextMenus();
    }
     
    function showContextMenu(elem){
        
        _hideContextMenus();
        
        divElem = elem.next('div#kontext-menu');
        divElem.removeClassName('inactive-kontext-menu');
        divElem.addClassName('active-kontext-menu');
        
        zeit = new Date();
        
        _contextCurrentY = divElem.offsetTop;
        _contextCurrentX = divElem.offsetLeft;
        _contextCurrentWidth = divElem.offsetWidth;
        _contextCurrentHeight = divElem.offsetHeight;   
        _contextMenuVisible=true;
        
        window.setTimeout(function(){
            if(!_contextMouseWasOver){
                _hideContextMenus();
            }
        },5000);
    }
     
    function _checkCoord(x, y){
     
        if(!_contextMenuVisible){
            return;
        }
        
        if(_contextCurrentX == 0 && _contextCurrentY ==0 && _contextCurrentHeight==0 && _contextCurrentWidth==0){
            return;
        }
     
        var endposH = _contextCurrentX + _contextCurrentWidth;
        var endposV = _contextCurrentY + _contextCurrentHeight;
            
        
        if ((_contextCurrentX < x && x  < endposH) &&
            (_contextCurrentY < y && y  < endposV)){
            
            if(!_contextMouseWasOver)
                _contextMouseWasOver=true;
        }
        else{
            if(_contextMouseWasOver){ // Wenn die Mouse noch nicht am Menüpunkt war eingeblendet lassen
                _hideContextMenus();
            }
        }
    }
     
    function _hideContextMenus(){
        _contextMouseWasOver=false;
        _contextCurrentY=0;
        _contextCurrentX=0;
        _contextCurrentWidth=0;
        _contextCurrentHeight=0;
        _contextMenuVisible=false;
        $$('.kontext-menu').invoke('removeClassName', 'active-kontext-menu');
        $$('.kontext-menu').invoke('addClassName', 'inactive-kontext-menu');
    }

    Ohne CSS geht das Ganze natürlich nicht
    Code :
    1
    2
    3
    4
    5
    
    .kontext-menu-link{width:50px; height:100%; z-index:1; background:url('/img/content/tablearrowdown.gif') no-repeat center center;  display:block; text-indent:-9999px}
    .kontext-menu{position:absolute; width:200px; background:#e2e9f4;z-index:100;}
    .kontext-menu ul{list-style-type:none; padding:0; margin:0;}
    .active-kontext-menu{display:block;}
    .inactive-kontext-menu{display:none;}

    Nun noch schnell wie man das verwendet

    HTML-Code:
    <a href="#" class=" kontext-menu-link">Hallo</a><div id="kontext-menu" class="kontext-menu"><ul><li><a href="/clients/edit/2"><img src="/img/icons/edit.png" alt="Bearbeiten" title="Bearbeiten" /></a></li><li><a href="/clients/delete/2" class="ajax" onclick="return confirm('Wollen Sie diesen Kunden wirklich löschen?');"><img src="/img/icons/delete.png" alt="Löschen" title="Löschen" /></a></li></ul></div>
    Wichtig die Klassen und IDs müssen genommen werden sonst funktioniert das Skript nicht und es ist Prototype notwendig.
     


    Kommentare Kommentar schreiben

    Klicke hier, um dich anzumelden

    Wie heißt die Hauptstadt der Bundesrepublik Deutschland?