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>



Kommentar schreiben

Bereiche
Kategorien
Forum - Webmaster & Internet





Artikel bewerten