/** * Menü-Objekt, zum Aufbau und Anzeigen eines Menüs * Copyright by ECO-Soft KEG Salzburg (www.eco-soft.at/tools) * * Die Funktion menueClick wird bei jeder Auswahl aufgerufen * Diese muss im aufrufenden Dokument deklariert sein * Bsp: function menueClick(id, m1, m2) { * (m2 = -1 wenn eine Menügruppe gewählt wurde) * * Bei der Anlage von Sprachen wird die Funktion setLanguage(id) * aufgerufen. Diese muss im aufrufenden Dokument deklariert sein * Bsp: function setLanguage(id) { * if (id == 'en') { ... * * Bei der Verwendung von Menu muss die Breite eines Menüeintrags * und der Name der Menüvariablen angegeben werden. * Bsp: var m = new Menue(150, "m"); * * Optional kann mit mdef ein Menüeintrag vorgewählt werden. Dies * ist die einzige Möglichkeit das Menü mit Browsern zu verwenden * die kein DHTML unterstützen. * Bsp: if (window.location.search) m = new Menue(150, "m", window.location.search.substr(3,1)); * else m = new Menue(150, "m"); * * function menueClick(objName, m1, m2) { * ... * if (m.getMethod().noDHTML()) location.href = "menue.htm?m=" + m1; */ function Menue(width, id, mdef) { this.mnu = new Array; // Menüeinträge für Submenüs this.lang = new Array; // Spracheinträge des Menüs this.inf = ""; // Info für den Benutzer this.width = width; // Die Breite eines Menüeintrags this.bg = "#efefef"; // Hintergrundfarbe this.reiter = 1; // Dreiecke bei Menüpunkten (Vorgabe grau wie Hintergrund) this.leftA = false; // Links ausrichten this.id = id; // ID der Menü, jedes Menü einer Seite benötigt eine andere ID if (mdef) this.mdef = mdef // Menüpunkt bei Normalzustand else this.mdef = 0; // -> 0 bedeutet dass kein Menü ausgewählt ist this.mnom = 0; // Menüpunkt soll - durch Mausaktion this.mis = 0; // Menüpunkt ist this.auto = false; // gewählter Menüeintrag nicht automatisch auf Default this.tOut = null; // timeOut Variable für das Menü this.tOutBl = null; // timeOut für Menüsperre this.meth = new DHTMLMethode(); // DHTML-Methode // die folgenden Funktionen werden zu Methoden von Menue deklariert this.setInf = setMenueInf; // Setzt die Info zur Benutzung this.addMenue = addMenue; // Fügt ein Sub-Menü an this.addMenueCabs = addMenueCabs; // Fügt ein Sub-Menü an (Wandelt Strin in Cabs) this.add = addEntry; // Fügt einen Menüpunkt an this.addLang = addLang; // Fügt eine Sprache an this.setBG = setBackground; // Hintergrundfarbe setzen this.setLeftAlign = setLeftAlign; // Menüs links ausrichten this.setAutoDefault = setAutoDefault; // auto setzen this.setDefault = setDefault; // Normalzustand (mdef) setzen this.getMethod = menuDHTMLMethode; // DHTML-Unterstützung des Menüs this.write = writeMenue; // Menü in das Dokument schreiben (TABLE) this.writeMain = writeMainMenue // Hauptmenü abhängig vom Browser this.writeSub = writeSubMenue; // Sub-Menü abhängig vom Browser this.getEmptyMenue=getEmptyMenueEntry; // Leerer Eintrag im Submenü this.getMenue = getMenueEntry; // Submenüeintrag this.chk = menueChk; // Event-Methoden this.setMenuSettings = setMenuSettings; this.click = menueClick_; this.leave = menueLeave; this.over = menueOver; this.mLeave = menueEntryLeave; this.mOver = menueEntryOver; this.setInf("ECO-Soft HTML Menü"); if (!(id)) { alert("Der Name des Menü-Objekts wurde nicht angegeben!"); } } /** * Methode setInf (function setMenueInf) setzt die Info zur Benutzung */ function setMenueInf(inf) { this.inf = inf.replace(/\s/g, " "); } /** * Methode addMenue (function addMenu) fügt ein Submenü an */ function addMenue(title, color, width) { this.mnu[this.mnu.length] = new MenueEntry(title, color, width); } /** * Methode addMenuCabs (function addMenuCabs) fügt ein Submenü an * Der Titel wird in cabs umgewandelt */ function addMenueCabs(title, color, width) { var g = title.toUpperCase(); var neu = ""; var n; var cab = true; for (n=0; n"; } else if (!cab && (title.charAt(n) == g.charAt(n))) { // Wechsel von klein auf gross neu = neu + ""; } neu += g.charAt(n); // Zeichen anfügen if (g.charAt(n) != " ") cab = (title.charAt(n) == g.charAt(n)); // Merken ob gross oder klein } if (!cab) neu = neu + ""; // Tag abschliessen this.mnu[this.mnu.length] = new MenueEntry(neu, color, width); } /** * Methode add (function addEntry) fügt einen Menüeintrag an */ function addEntry(title) { this.mnu[this.mnu.length -1].add(title); } /** * Methode addLang (function addLang) fügt eine Sprache an */ function addLang(id, lang) { this.lang[this.lang.length] = new LangEntry(id, lang); } /** * Hintergrundfarbe und Hintergrundart setzen * Die Hintergrundart ist: * - 0: keine Abschrägung der Menüpunkte * - 1: Abschrägung in Grau 1.Zeile, in Weiss 2.Zeile -> nur bei Markierten Menüpunkten sichtbar * - 2: Abschrägungen in Weiss -> immer sichtbar * Anmerkung wenn eine andere Hintergrundfarbe als #efefef verwendet wird muss * für die Art 1 'greiter.gif' auf diese Farbe abgeändert werden! */ function setBackground(bgr, art) { this.bg = bgr; // Hintergrundfarbe if (art) this.reiter = art; // Dreiecke bei Menüpunkten (Abschrägung) else this.reiter = 0; } /** * Menüs links ausrichten */ function setLeftAlign() { this.leftA = true; } /** * Menü automatisch nachführen */ function setAutoDefault(s) { this.auto = s; } /** * Methode setDefault (function setDefault) fügt ein Submenü an */ function setDefault(mnu) { this.mdef = mnu; // Menüpunkt bei Normalzustand - 0 bedeutet dass kein Menü ausgewählt ist this.mnom = mnu; this.chk(); } /** * Methode method, gibt ob das Menü mit DHTML arbeitet */ function menuDHTMLMethode() { return this.meth; } /** * Die Funktion writeMenue() (Methode write()) schreibt das Menü in das Dokument. * Die Einbindung eines Menüs mit dem Namen m könnte wie folgt aussehen: * m.write(); */ function writeMenue() { var htm = ""; var n; htm += ""; htm += ""; htm += ""; htm += ""; htm += ""; htm += "" + this.writeSub() + ""; htm += ""; htm += "
"; htm += ""; htm += this.writeMain(); htm += "
"; if (this.lang.length > 0) { htm += ""; for (n=0; n0) htm += ""; htm += ""; } htm += "
" + this.lang[n].getLangTag() + "
"; } htm += "		 + this.inf +
"; document.write(htm); this.mnom = this.mdef this.chk(); } function writeMainMenue() { var htm = ""; var n; var r_img; if (this.reiter == 1) r_img = "" else if (this.reiter == 2) r_img = "" else r_img = "" if (this.getMethod().dom() || this.getMethod().all()) { // JS 1.5 Dom Objekt oder MSIE All Objekt for (n=1; n<=this.mnu.length; n++) { htm += "" + r_img + ""; htm += "" + this.mnu[n -1].title + ""; htm += ""; } } else if (this.getMethod().layer()) { // NS4 Layer var htm1; var htm2; for (n=1; n<=this.mnu.length; n++) { htm1 = ""; htm2 += "
" + r_img + "" + this.mnu[n -1].title + ""; htm2 += "
"; htm += ""; htm += ""; htm += "" + htm1 + htm2 + ""; htm += "" + htm1 + " bgcolor=" + this.mnu[n -1].color + htm2 + ""; htm += ""; htm += ""; } } else { // Unbekannter Browser for (n=1; n<=this.mnu.length; n++) { if (this.mdef == n) { htm += "" + r_img + ""; htm += "" + r_img + ""; htm += "" + this.mnu[n -1].title + ""; htm += ""; } } return htm; } function writeSubMenue() { var htm = ""; var r_img; if (this.reiter == 0) r_img = "" else r_img = "" if (this.getMethod().dom() || this.getMethod().all()) { // JS 1.5 Dom Objekt oder MSIE All Objekt htm += "" + r_img + ""; htm += ""; htm += this.getEmptyMenue(); htm += ""; } else if (this.getMethod().layer()) { // NS4 Layer htm += ""; htm += ""; htm += ""; htm += this.getEmptyMenue(); htm += ""; } else { // Unbekannter Browser if (this.mdef == 0) { htm += "" + r_img + ""; htm += ""; htm += this.getEmptyMenue(); } else { htm += "" + r_img + ""; htm += ""; htm += this.getMenue(this.mdef -1); } htm += ""; } return htm; } /** * Leeres Sub-Menü */ function getEmptyMenueEntry() { return "
 
"; } /** * Sub-Menü */ function getMenueEntry(nr) { return this.mnu[nr].getTable(this.id, nr +1, this.leftA); } /** * Die Methode chk(), Funktion menueChk aktualisiert das Menü dynamisch */ function menueChk() { if (this.tOut != null) window.clearTimeout(this.tOut); this.tOut = null; if (this.mnom != this.mis) { if (this.mis != 0) { this.setMenuSettings(this.mis, this.bg, true, this.getEmptyMenue()); this.mis = 0; } if (this.mnom != this.mis) { this.setMenuSettings(this.mnom, this.mnu[this.mnom -1].color, false, this.getMenue(this.mnom -1)); this.mis = this.mnom; } } } function setMenuSettings(m, co, clear, menu) { var hlp; if (this.getMethod().dom() || this.getMethod().all()) { // JS 1.5 Dom Objekt oder MSIE All Objekt if (clear) hlp = "#ffffff"; else hlp = co; document.getElementById(this.id + "r" + m).style.backgroundColor = co; document.getElementById(this.id + "n" + m).style.backgroundColor = co; document.getElementById(this.id + "_n").innerHTML = menu; document.getElementById(this.id + "_n").style.backgroundColor = hlp; document.getElementById(this.id + "_r").style.backgroundColor = hlp; // document.all(this.id + "r" + m).setAttribute("bgcolor", co, "false"); // document.all(this.id + "n" + m).setAttribute("bgcolor", co, "false"); // document.all(this.id + "_n").innerHTML = menu; // document.all(this.id + "_n").setAttribute("bgcolor", hlp, "false"); // document.all(this.id + "_r").setAttribute("bgcolor", hlp, "false"); } else if (this.getMethod().layer()) { // NS4 Layer if (clear) { document.layers[this.id + m + "_il"].layers["l1"].visibility = "show"; document.layers[this.id + m + "_il"].layers["l2"].visibility = "hide"; hlp = menu; } else { document.layers[this.id + m + "_il"].layers["l1"].visibility = "hide"; document.layers[this.id + m + "_il"].layers["l2"].visibility = "show"; hlp = ""; hlp += "
"; if (this.reiter == 0) hlp += ""; else hlp += ""; hlp += "" + menu + "
"; } document.layers[this.id + "_il"].layers["l2"].document.clear(); document.layers[this.id + "_il"].layers["l2"].document.write(hlp); document.layers[this.id + "_il"].layers["l2"].document.close(); } // Der Unbekannte Browser wird hier nicht behandelt (keien dynamische Änderung) } /** * Mouseevent Methode click() */ function menueClick_(m1, m2) { if (this.auto) { this.mdef = m1; // Menüpunkt bei Normalzustand - 0 bedeutet dass kein Menü ausgewählt ist this.mnom = m1; } if (this.tOutBl != null) { window.clearTimeout(this.tOutBl); this.tOutBl = null; } if (m2 == -1) { // Nach Klick auf eine Menügruppe wird das Menü kurz für Mousover gesperrt this.tOutBl = window.setTimeout(this.id + ".tOutBl = null",2000); } menueClick(this.id, m1, m2); } /** * Mouseevent Methode leave() */ function menueLeave(m) { this.mnom = this.mdef; if (this.tOut != null) window.clearTimeout(this.tOut); this.tOut = window.setTimeout(this.id + ".chk()",2000); return true; } /** * Mouseevent Methode over() */ function menueOver(m) { if (this.tOutBl == null) { this.mnom = m; this.chk(); } return true; } /** * Mouseevent Methode mLeave() */ function menueEntryLeave() { this.mnom = this.mdef; if (this.tOut != null) window.clearTimeout(this.tOut); this.tOut = window.setTimeout(this.id + ".chk()",2000); return true; } /** * Mouseevent Methode mOver() */ function menueEntryOver() { if ((this.mis != this.mdef) && (this.mnom == this.mdef)) { this.mnom = this.mis; } return true; } /** * MenueEntry-Objekt, wird von Menue verwendet */ function MenueEntry(title, color, width) { this.mnu = new Array(); this.title = title; this.color = color; this.width = width; // die folgenden Funktionen werden zu Methoden von MenueEntry deklariert this.add = addMenueEntry; // Fügt ein Sub-Menü an this.getTable = getEntryTable; // Der Menüeintrag als Tabelle } function addMenueEntry(name) { this.mnu[this.mnu.length] = name; } function getEntryTable(id, m, leftA) { var htm = ""; var n; if ((leftA) && (this.mnu.length==1)) { htm += ""; if (m>1) htm += ""; htm += ""; } else { htm += "
"; htm += "" htm += "" htm += this.mnu[0] + "
"; for (n=1; n<=this.mnu.length; n++) { htm += ""; } else { htm += " "; } } } htm += "
" htm += this.mnu[n -1] + "
"; return htm; } /** * LangEntry-Objekt, wird von Menue verwendet */ function LangEntry(id, lang) { this.id = id; if (lang) this.lang = lang; else this.lang = id; // die folgenden Funktionen werden zu Methoden von MenueEntry deklariert this.getLangTag = getLangTag; // Der Sprach-Tag mit a href Tag } function getLangTag() { return "" + this.lang + ""; } /** * Methode-Objekt, gibt die Methode (verwendetes HTML-Modell) an */ function DHTMLMethode() { this.method = 4; // noDHTML // die folgenden Funktionen werden zu Methoden von MenueEntry deklariert this.dom = dhtmlMethodIsDom; this.all = dhtmlMethodIsAll; this.layer = dhtmlMethodIsLayer; this.noDHTML = dhtmlMethodIsNoDHTML; this.setDom = dhtmlSetMethodIsDom; this.setAll = dhtmlSetMethodIsAll; this.setLayer = dhtmlSetMethodIsLayer; this.setNoDHTML = dhtmlSetMethodIsNoDHTML; this.init = dhtmlInitMethod; this.init(); } function dhtmlMethodIsDom() { return (this.method == 1); } function dhtmlMethodIsAll() { return (this.method == 2); } function dhtmlMethodIsLayer() { return (this.method == 3); } function dhtmlMethodIsNoDHTML() { return (this.method == 4); } function dhtmlSetMethodIsDom() { this.method = 1; } function dhtmlSetMethodIsAll() { this.method = 2; } function dhtmlSetMethodIsLayer() { this.method = 3; } function dhtmlSetMethodIsNoDHTML() { this.method = 4; } function dhtmlInitMethod() { if (document.all) { // MSIE this.method = 2; } else if (document.layers) { // Netscape 4 this.method = 3; } else if (typeof document.getElementsByTagName('html') == "object") { // Dom -> Diese Abfrage verursacht in NS 4 einen Fehler und liefert // im MSIE true obwohl in MSIE 5 nicht vollständig implementiert. // Diese Abfrage erfolgt deshalb am Ende! this.method = 1; } }