Dateiversion:
|
diesen Beitrag diskutieren,ergänzen, eine Frage stellen |
|
|
Homepagebau |
|
|
||
|
|
||||||
Kontextmenü ersetzen
Schwierigkeit: für Fortgeschrittene
2 kbyte
Skript-Paket downloaden
Mit diesem Skript können sie das normale Kontextmenü ihres Browser durch ein eigenes ersetzen.
Um das Kontextmenü zu ersetzen, fangen wir zunächst jeden Versuch ab, das normale Kontextmenü des Internet Explorer oder Netscape zu öffnen. Dabei hilft uns das in JavaScript 1.3 neue Ereignis "onContextmenu". Hier rufen wir nun unser Menü auf und liefern "false" zurück um den Browser daran zu hindern, sein eigenes einzublenden.
<BODY onContextmenu="meinKontextMenue.show(event); return false;"
onClick="meinKontextMenue.hide()">Wie das Kontextmenü aussehen soll, können sie in der Datei "daten.js" beschreiben. Öffnen sie die Datei dazu einfach mit einem beliebigen Texteditor.
Syntaxbeschreibung
var meinKontextMenue= new ContextMenu(breite, höhe, html, css);breite = Breite des Menüs in Pixel
höhe = Höhe des Menüs in Pixel
html = der Inhalt des Kontextmenüs (HTML)
css = Formatierungsanweisungen (CSS) - optionalFertig? Dann brauchen wir das fertige Skript nur noch zu importieren:
Im Head-Bereich des Dokuments laden wir die Skripte
<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="overlay.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="kontext.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="daten.js"></SCRIPT>
</HEAD>Abschließend: der Aufruf des Kontextmenüs, wenn der Besucher die rechte Maustaste drückt.
Außerdem soll es sich schließen, wenn irgendwo anders geklickt wird.
<BODY
onContextMenu="meinKontextMenue.show(event); return false;"
onClick="meinKontextMenue.hide()">
...
</BODY>
Versuchen sie doch einfach mal auf dieser Seite das Kontextmenü ihres Browsers zu öffnen
Dieser Abschnitt richtet sich an Profis, die eigene Skripte in JavaScript oder JScript verfassen.
Kommen wir noch einmal zum Skript zurück:
<BODY onContextmenu="meinKontextMenue.show(event); return false;"
onClick="meinKontextMenue.hide()">Was wir hier "event" genannt haben ist eine Referenz auf das Ereignisobjekt, welches vom Browser automatisch erzeugt wird sobald ein Ereignis eintritt. Dieses Objekt gibt unter anderem Auskunft, über die gedrückten Tasten, oder die Position des Mauszeigers in dem Moment, als das Ereignis ausgelöst wurde. Mit Hilfe dieser Daten kann die Funktion "show()" das Kontextmenü genau unterhalb der Mauszeigers positionieren.
Klassenhierarchie:
Unser Kontextmenü ("meinKontextMenü") ist ein Objekt der Klasse "ContextMenu". Diese Klasse wird in der Datei "kontext.js" definiert.
Die Datei "overlay.js" definiert eine Klasse "overlayWindow", die ich speziell entworfen habe um mit Layern umzugehen. Eine Klassenbeschreibung finden sie hier! Diese Klasse kann ganz allgemein verwendet werden, um Layer zu erzeugen und den Umgang damit zu erleichtern.
ContextMenu ist eine von OverlayWindow abgeleitete Klasse. Die Eigenschaften und Methoden erbt unser Kontextmenü also von seiner Basisklasse. Allerdings ist die Funktion "show()" der Basisklasse von ContextMenu überschrieben, um das spezielle Verhalten nachzubilden, dass man vom Kontextmenü des Webbrowsers gewohnt ist.
Just4fun... Position des Mauszeigers anzeigen:
Das folgende Beispiel zeigt die Position des Mauscursors in der Statusleiste an. (hier: IE)
<!-- Hinweis auf Autor bitte nicht entfernen! -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Autor: www.All-Community.de
function showPosition() {
var status = "Mausposition: X = " + window.event.x + document.body.scrollLeft;
status += " und Y = " + window.event.y + document.body.scrollTop;
window.status = status;
};
//-->
</SCRIPT>
</HEAD>
<BODY onMousemove="showPosition();">
...
</BODY>
|
Autor: Thomas Meyer |
Home: www.All-Community.de |
Kontakt: |
