Nightfire Java Archiv - Tutorials

[]

Das RightMenu bietet eine wunderbare Möglichkeit, das Kontextmenu, das beim Rechtsklick innerhalb einer Webseite erscheint, durch ein eigenes zu ersetzen. Das Menu weist einige Besonderheiten auf und ist nicht gerade einfach an die eigene Webseite anzupassen, weshalb wir mit folgendem Tutorial dem eher unerfahrenen Anwender etwas unter die Arme greifen möchten.

Das Menu wird in eine externe JavaScript- Datei ausgelagert. Bei dieser Datei handelt es sich um eine Textdatei, welche unter der Extension .js gespeichert wird. JavaScript- Dateien enthalten den Scriptcode ohne die einleitenden und abschliessenden <SCRIPT>, bzw. </SCRIPT> Tags.

Der grosse Vorteil externer Script- Dateien ist die beliebige Wiederverwendbarkeit, da der Code nur einmal geschrieben werden muss und beliebig oft in HTML- Dokumente gelinkt werden kann.

Die Einbindung erfolgt mit folgendem Tag, der zweckmässigerweise im Headbereich des Dokuments, also zwischen <HEAD> und </HEAD> platziert wird:

Zu Beginn des Scripts werden einige Variablen angelegt:

var menucontent = "";

var sourcedir = "";

Die Variable menucontent enthält den kompletten HTML- Code für das Menu inklusive der Style- Sheets, die für das Erscheinungsbild des Menus verantwortlich sind. Um den String etwas übersichtlicher zu machen, ist er in mehrere Teilstrings unterteilt, die mit einem Pluszeichen (+) wieder zu einem String verbunden werden:

menucontent += '<HTML><HEAD><STYLE></STYLE></HEAD>';

menucontent += '<BODY><OBJECT ID="cerca" CLASSID="clsid:B45FF030-4447-11D2-85DE-00C04FA35C89" HEIGHT="0" WIDTH="0"></OBJECT><DIV ID="right_menu" CLASS="generale">';

menucontent += '<center><img border="0" src="../../bilder/pb_nightfire.gif" width="88" height="31"></center><hr size="1" color="#8080FF">';

In den folgenden Zeilen sind die exe- Funktionsaufrufe zu beachten, die später dazu dienen, die Befehle des Menus zu bestimmen und diese auszuführen. Ebenso wird jeweils der anzuzeigende Statuszeilentext sowie die Icons definiert. Die zu übergebenden Argumente sind zwingend in Backslashes zu fassen, da damit die Hochkommas maskiert werden, um das vorzeitige Abschliessen des Strings zu vermeiden.

menucontent += '<DIV CLASS="components" ONCLICK="exe(\'home\')" STATUSTEXT="Diese Seite als Startseite"> <img border="0" src="../../bilder/tree/ic_home.gif" width="16" height="16"> Diese Seite als Startseite</DIV>';

menucontent += '<DIV CLASS="components" ONCLICK="exe(\'bookmark\')" STATUSTEXT="Diese Seite zu den Favoriten"> <img border="0" src="../../bilder/tree/ic_favorite.gif" width="16" height="16"> Diese Seite zu den Favoriten</DIV> <hr size="1" color="#8080FF">';

menucontent += '<DIV CLASS="components" ONCLICK="exe(\'seek\')" STATUSTEXT="Suchen bei Nightfire"><img border="0" src="../../bilder/tree/Binoccular.gif" width="16" height="16"> Suchen bei Nightfire</DIV>';

menucontent += '<DIV CLASS="components" ONCLICK="exe(\'news\')" STATUSTEXT="News bei Nightfire"><img border="0" src="../../bilder/tree/ic_new.gif" width="16" height="16"> Nightfire News</DIV><hr size="1" color="#8080FF">';

menucontent += '<DIV CLASS="components" ONCLICK="exe(\'emaildp\')" STATUSTEXT="e-Mail an den Webmaster"><img border="0" src="../../bilder/tree/ic_mail.gif" width="16" height="16"> e-Mail an den Webmaster</DIV><hr size="1" color="#8080FF">';

menucontent += '<DIV CLASS="components" ONCLICK="exe(\'info\')" STATUSTEXT="Info & Copyright"><img border="0" src="../../bilder/tree/ic_info.gif" width="16" height="16"> Info & Copyright</DIV>';

menucontent += '</DIV></BODY></HTML>';

Da das Script nur mit dem Explorer ab Version 4 funktioniert, werden an dieser Stelle bereits alle Browser ausgeschlossen, die das Objekt all nicht interpretieren:

if (document.all && window.print) document.write (menucontent);

Die folgende Funktion dient dazu, die Menuelemente bei Mouseover farblich zu unterlegen und den weiter oben definierten Statuszeilentext anzuzeigen. Hierzu werden die Werte der Style- Sheets dynamisch verändert. Die Farben können Sie Ihrem Geschmack entsprechend anpassen.

Die folgende Funktion macht die Änderungen wieder rückgängig, sobald der Mauszeiger das Objekt wieder verlässt. Achten Sie darauf, die gleichen Farben zu verwenden, die Sie bei der Definition der Style- Sheets zu Beginn des Scripts (menucontent) gesetzt haben.

function light_off(){
if (event.srcElement.className == "components"){
event.srcElement.style.backgroundColor="#00468C";
event.srcElement.style.color="#8080FF";
window.status = "";
}
}

Die folgende Funktion dient dazu, die Position des Menus innerhalb der Webseite zu bestimmen. Hierbei wird jeweils die Position des Mauszeigers ermittelt, das Menu angezeigt, sowie darauf geachtet, dass das Menu immer komplett innerhalb der Seite angezeigt wird, auch wenn der Mausklick irgendwo am Rande erfolgt. An dieser Funktion sollte nichts verändert werden.

Diese Funktion macht das Menu wieder unsichtbar.

function hide (){
right_menu.style.visibility = "hidden";
right_menu.style.left = -999;
right_menu.style.top = -999;
}

Die Funktion exe dient dazu, die vom Menu auszuführenden Befehle zu definieren. Dies ist der kniffligste Teil des Menus, da jeder Webmaster seine eigenen Menufunktionen bestimmen muss und diese als JavaScript- Code eingesetzt werden müssen. Wir können an dieser Stelle nur einige Beispiele aufführen, die man einsetzen könnte. Achten Sie darauf, dass type == "......" den zu Beginn des Scripts definierten Namen (z.Bsp.: "exe(\'home\')") entspricht.

function exe(type){

Eine Seite als Startseite bestimmen:

if (type == "home"){
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://www.nightfire.ch/java/'); // Startseite definieren

Eine Seite bookmarken (zu Favoriten hinzufügen):

} else if (type == "bookmark"){
var imgFav= new Image();
imgFav.src= "http://www.nightfire.ch/favicon.ico"; // definieren des Favourite Icons
window.external.AddFavorite('http://www.nightfire.ch', 'Nightfire'); // URL und Titel des Bookmarks

Eine bestimmte Seite aufrufen:

} else if (type == "seek"){
self.location="../search.html";

Das Objekt self entspricht hier dem Attribut target, welches in HTML verwendet wird, um das Zielfenster zu bestimmen, in welchem ein Link geladen werden soll. Anstelle von self (im gleichen Fenster) können Sie auch top oder den Namen eines Fensters oder Frames verwenden. Nicht möglich ist die Verwendung von blank (in einem neuen Fenster öffnen), verwenden Sie hierfür in JavaScript den open- Befehl.

Starten des Mailclients:

} else if (type == "emaildp"){
location.href="mailto:webmaster@nightfire.ch";
}

Es gibt noch viele weitere Möglichkeiten, das Menu zu gestalten, so kann man beispielsweise die Seite speichern lassen, etc...
Hier gilt: Test it out ;-)

Die letzte Funktion dient dazu, die Ausführung des Scripts bei bestimmten Eregnissen zu starten und auch wieder abzubrechen, damit das Menu nicht ständig angezeigt wird.

function cancelproc () {
window.event.cancelBubble = true;
window.event.returnValue = false;
}

if (document.all && window.print){
document.oncontextmenu=extension;
document.body.onclick=hide;
right_menu.onmouseover=light_on;
right_menu.onmouseout=light_off;
right_menu.ondragstart=cancelproc;
right_menu.onselectstart=cancelproc;
}
// -->

Viel Spass und Erfolg beim Erstellen Ihres eigenen RightMenus!!

Ein Beispiel des Scripts finden Sie hier

zurück