nicht angemeldet
Registerkaraten mit Netscape
Hallo zusammen,
aus dem Netz habe ich ein "Registerkarten" Skript gezogen, es funktioniert leider nur in IE, im Netscape überhaupt nicht.
Hier ein Ausschnitt:
...
function changeTabs()
{
if(firstFlag == true)
{
currentTab = t1;
tabBase = t1base;
firstFlag = false;
}
if(window.event.srcElement.className == "tab")
{
currentTab.className = "tab";
tabBase.style.backgroundColor = "white";
currentTab = window.event.srcElement;
tabBaseID = currentTab.id + "base";
tabContentID = currentTab.id + "Contents";
tabBase = document.all(tabBaseID);
tabContent = document.all(tabContentID);
currentTab.className = "selTab";
tabBase.style.backgroundColor = "";
tabContents.innerHTML = tabContent.innerHTML;
}
}
...
Die Funktion wird aufgerufen im body:
...
<body OnClick="changeTabs()">
...
Ich wies dass Netscape kein event "srcElement" unterstützt, wo mit kann ich es ersetzen um es im Netscape zum laufen zu bringen? oder kennt jemand ein anderes Beispiel, dass im Netscape lauffähig ist?
Danke im voraus.
Grüße bernhard
-
Hi!
Das Ding funktioniert deshalb nur im IE:
if(window.event.srcElement.className == "tab")
Kennt nur der IE.
tabBase = document.all(tabBaseID);
Kennt nur der IE. Allerdings für diesen wie für alle modernen Browser folgendes benutzen: document.getElementById();
tabContents.innerHTML = tabContent.innerHTML;
Mit vorsicht zu geniesen.
<body OnClick="changeTabs()">
Aha.
Da ich nicht genau weiss was du machen willst, habe ich unter http://rcswww.urz.tu-dresden.de/~rs324721/event.html schnell was gebastelt (funktioniert definitv unte IE5,NN6/Mozilla,Opera7,Konqueror3/Safari) weil ich für große Erklärungen gerade zu faul bin. Es macht ertmal nichts weiter, als bei Klick auf ein der Boxen den Text der angeklickten Box von schwarz auf rot zusetzen, bei einer Reiteranwendung wäre da noch ganz andere Sachen möglich. Schau dir den Quelltext an!
Gruß Herbalizer
--
SELF-Code: (http://emmanuel.dammerer.at/selfcode.html)
sh:( fo:) ch:? rl:( br:> n4:& ie:% mo:} va:} de:] zu:) fl:{ ss:) ls:& js:|-
Hallo,
erst Mal danke für den Beispiel, das was Du geschrieben hast ist das was ich gesucht habe, leider habe ich noch Schwierigkeiten mit dem Verständnis dieses Scripts :-( an dieser Stelle würde ich es beschreiben was die einzelnen "Teile" machen, falls ich das falsch verstehe kannst Du bitte es korrigieren.
Die Funktion "addEvent". Sie bekommt vier Argumente "obj", "evType", "fn", "useCapture". Ist ein "obj" aktiv, das wird über "obj.addEventListener" abgefragt dann "füge" das aktive Element zu dem Objekt, danach ist das Element nicht anklickbar, es sind alle anderen Elemente anklickbat.
Das "addEventListener" wird statt "window.event.srcElement" benutzt?
Was die einzelnen Argumente für eine Aufgabe bzw. ein Funktion haben ich mir auch leider unklar :-(Die Funktion "init". Sie wird geladen während des laden der Seite. "tabs" nimmt alle Reiter auf, wie Du beschrieben hast. In der for-Schleifen werden alle "span" Elemente durchsucht und alle Elemente die nicht angeklickt sind bekommen ein OnClick vorangestellt.
Die Funktion "changeTabs", in der erste if-Abfrage, ist ein Element für die Browser Mozilla, Opera7 und Konqueror(?) angeklickt gehe rein ansonsten ist es IE.
Beim Aufruf mit Netscape, ist man in der erste if-Abfrage, dann kommt folgender Element, "if(e.target.nodeType == 3) { // falls das Text-node angeklickt" also ich würde das so verstehen, ist ein Knoten Nr. 3 angeklickt dann weise den Elternknoten die grade angeklickte Position zu, wie Du auch beschreibst: "obj sei der angeklickte Reiter". Der Rest der Funktion ist mir klar. Der grade angeklickte Element wird nach drei abgefragt, warum grade drei? ich benötige grade fünf, was ist wenn ich es noch mehr erweitern will? Diesen Teil verstehe ich leider am wenigsten :-(Dein Script habe ich vorerst etwa so erweitert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>event.htm</title><style type="text/css">
span {border: solid 1px black;padding: 0.5em; cursor: hand;}
div>span {cursor: pointer;}
span.tab {color: red;}
span.notab {color: black;}
</style><script type="text/javascript">
<!--
// Funktion für das hinzufügen von Events
// Weil object.onclick = function funktioniert nicht im IEfunction addEvent(obj, evType, fn, useCapture)
{
if (obj.addEventListener){ // DOM2-Events-Methode
obj.addEventListener(evType,fn,useCapture);
} else if (obj.attachEvent){ // IE-Events-Methode
obj.attachEvent("on"+evType, fn);
}
}// Nimmt ein Array voller Reiter auf
var tabs;/*
wenn dokument geladen, sammle alle Reiter in einem Array und
füge ein onclick-Eventhandler für alle Reiter mit der ensprechenden
Wechselfunktion ein
*/onload = function init() {
tabs = document.getElementsByTagName('span');
for(var i = 0; i < tabs.length; i++) {
addEvent(tabs[i],"click",changeTabs,false);
}
}function changeTabs(e) // e ist ein Event
{
if(e.target) { // DOM2-Event für Mozilla, Opera7 und Konqueror(?)
if(e.target.nodeType == 3) { // falls das Text-node angeklickt
var obj = e.target.parentNode; // obj sei der angeklickte Reiter
} else if(e.target.nodeType == 1) { // wenns ein Element ist
var obj = e.target;
}
} else if (e.srcElement) { // IE
var obj = e.srcElement;
}
// setze alles auser dem angeklickten Reiter auf klasse notab
for(var i = 0; i < tabs.length; i++) {
if(tabs[i] != obj) {
tabs[i].className = 'notab';
}
}
// setze angeklickten Reiter auf Klasse tab
obj.className = 'tab';
// mache noch andere Sachen die beim Reiterwechsel passieren sollen
}
//-->
</script>
</head><body>
<div>
<span class="tab">Klick Tab1</span>
<span class="notab">Klick Tab2</span>
<span class="notab">Klick Tab3</span>
<span class="notab">Klick Tab4</span>
<span class="notab">Klick Tab5</span>
</div>
</body>
</html>------------------------------------------------------
Mein Script sieht dagegen so aus:
<HTML>
<HEAD>
<TITLE>seite1</TITLE>
<style type="text/css">
.conts
{
visibility:hidden;
}
.tab
{
border-top:solid thin #E0E0E0;
border-right:solid thin gray;
border-left:solid thin #E0E0E0;
font-family:Verdana;
font-size:11px;
text-align:center;
font-weight:normal;
cursor:hand;
}
.selTab
{
border-left:solid thin black;
border-top:solid thin black;
border-right:solid thin black;
font-weight:bold;
font-color:dodgerblue;
text-align:center;
font-size:11px;
}
td.ausgabe_td
{
border-left:solid thin white;
border-bottom:solid thin white;
border-right:solid thin white;
vertical-align:top;
font-size:11px;
}
</style>
<script LANGUAGE="JavaScript">
<!--
var currentTab;
var tabBase;
var firstFlag = true;function changeTabs(){
if(firstFlag == true)
{
currentTab = t1;
tabBase = t1base;
firstFlag = false;
}
if(window.event.srcElement.className == "tab")
{
currentTab.className = "tab";
tabBase.style.backgroundColor = "white";
currentTab = window.event.srcElement;
tabBaseID = currentTab.id + "base";
tabContentID = currentTab.id + "Contents";
tabBase = document.all(tabBaseID);
tabContent = document.all(tabContentID);
currentTab.className = "selTab";
tabBase.style.backgroundColor = "";
tabContents.innerHTML = tabContent.innerHTML;
}
}
// -->
</script>
</HEAD><body OnClick="changeTabs()" bgcolor="#CCCCCC">
<table CELLPADDING="0" CELLSPACING="0" border="0">
<TR>
<TD height="15" bgcolor="#FFFFFF"> </TD>
<TD height="15" bgcolor="#ABBDCB"> </TD>
<TD height="15" bgcolor="#CCCCCC"> </TD>
</TR>
<TR>
<TD bgcolor="#FFFFFF" width="13"> </TD>
<TD bgcolor="#ABBDCB" width="12"> </TD>
<TD><table STYLE="width:283; height:696" CELLPADDING="0" CELLSPACING="0" bgcolor="#CCCCCC" border="0">
<tr>
<td ID="t1" CLASS="selTab" HEIGHT="25" bgcolor="#CCCCCC">Reiter-A</td>
<td ID="t2" CLASS="tab" bgcolor="#CCCCCC">Reiter-B</td>
<td ID="t3" CLASS="tab" bgcolor="#CCCCCC">Reiter-C</td>
<td ID="t4" CLASS="tab" bgcolor="#CCCCCC">Reiter-D</td>
<td ID="t5" CLASS="tab" bgcolor="#CCCCCC">Reiter-E</td> </tr>
<tr>
<td ID="t1base" STYLE="height:2; border-left:solid thin black" bgcolor="#CCCCCC"></td>
<td ID="t2base" STYLE="height:2; background-color:white"></td>
<td ID="t3base" STYLE="height:2; background-color:white"></td>
<td ID="t4base" STYLE="height:2; background-color:white"></td>
<td ID="t5base" STYLE="height:2; background-color:white"></td>
</tr>
<tr>
<td HEIGHT="*" COLSPAN="5" ID="tabContents" CLASS="ausgabe_td" bgcolor="#CCCCCC">
reiter-1
Anfang
</td>
</tr>
</table>
<div CLASS="conts" ID="t1Contents" align="center">
reiter-1
</div>
<div CLASS="conts" ID="t2Contents" align="center">
reiter-2
</div>
<div CLASS="conts" ID="t3Contents" align="center">
reiter-3
</div>
<div CLASS="conts" ID="t4Contents" align="center">
reiter-4
</div>
<div CLASS="conts" ID="t5Contents" align="center">
reiter-5
</div></TD>
</TR>
</BODY>
</html>Ich versuche aus den beiden Scripten entweder eins zu erstellen, das in beiden Browsern läuft oder eins von beiden so zu erweitern, dass er ebenfalls in beiden Browsern funktioniert.
Noch Mal Danke für Deine Hilfe.Grüße bernhard
-
Hi!
addEvent fügt ein oder mehrere events einem Objekt obj zu. Dabei werden zwei unterschiedliche Formen des Eventhandlings unter einen hut gebracht:
addEventlistener für alle Browser die DOM-2-Events (das sind mindestens Mozilla und NN ab 6,Opera7 und Konqueror3/Safari) können http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener und der IE-Ansatz attachEvent http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/attachevent.asp
Als Parameter erwartet sie:
obj - das Object/ Element das das event erhält
evType - den Eventtyp (click, mouseover, load usw.)
fn - ist der Name der Funktion der bei auslösen des Events ausgeführt werden soll
useCapture - da ist mir die Erklärung in der W3C-Spec zu kompliziert, sollte aber auf false gesetzt werden, weil sonst Opera seine Arbeit verweigert.Die Funktion "init". Sie wird geladen während des laden der Seite. "tabs" nimmt alle Reiter auf, wie Du beschrieben hast. In der for-Schleifen werden alle "span" Elemente durchsucht und alle Elemente die nicht angeklickt sind bekommen ein OnClick vorangestellt.
init wird ausgeführt, wenn die Seite geladen ist. Hier kannst du alle Elemente, welche ein Tab sein sollen, einsammeln, in einer globalen Variable (tabs) speichern und ihnen mittels addEvent den Eventhandler click (in HTML wäre es das onclick-Attribut) hinzufügen, welcher die Funktion changeTabs ausführen soll.
In deinem Beispiel sind das dann natürlich keine span-Elemente sondern alle td-Elemente der ersten Zeile der zweiten Tabelle.
Statt
tabs = document.getElementsByTagName('span');
steht dann folgendes da:
tabs = document.getElementsByTagName('table').item(1).getElementsByTagName('tr').item(0).getElementsByTagName('td')
Über die Methode getElementsByTagName findest du hier etwas http://selfhtml.teamone.de/javascript/objekte/document.htm#get_elements_by_tag_namechangeTabs fängt ein Event ab und schaut erstmal welches Element das Event ausgelöst hat.
Der Parameter e sei das ausgelöste Eventobjekt.
Jetzt wird wieder nach DOM-2-Event fähigen Browsern und dem IE unter schieden:
kann ein Browser DOM-2, so läst sich das auslösende Objekt mittels e.target http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-target herausfinden. Ist es der IE wird das mit e.srcElement http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/srcelement.asp bewerkstelligt. Bei richtigen DOM-fähigen Browsern muss allerdings noch genau geprüft werden, ob das Event von dem Element (bei mir das span-Element, bei dir die Tabellenzelle) ausgelöst wird oder von dem in dem Element enhaltenen Text. Deswegen prüfe ich in:
if(e.target.nodeType == 3) {
var obj = e.target.parentNode;
} else if(e.target.nodeType == 1) {
var obj = e.target;
}
auf mittels nodeType http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-111237558 den Typ des angeklickten Objektes. Diese Typen sind in http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1950641247 festgelegt. Typ 1 ist ein Element, Typ 2 ein Attribut, Typ 3 ist Text usw. Du siehst also, das die Zahlen nichts mit der Anzahl der Objekte zu tun haben. Wenn das Event also von Text ausgelöst wurde, will ich ja nicht das obj das Textobjekt ist, sondern die Tabellenzelle (bei mir span), also muss ich das Elternelement (parentNode http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1060184317) des Textes an obj übergeben.
Danach werden in einer Schleife alle in tabs gespeicherten Elemente auf die Klasse notab gesetzt (bei dir entsprechen meine Klassen tab und notab den Klassen selTab und tab) und danach wird die Klasse des selektierten Elements, welches ja in obj gespeichert ist, auf die Klasse tab gesetzt.
Danach kannst du dann mit den div's herumhantieren. Ich würde allerdings nicht die Inhalte der div's vertauschen, wie es in deiner Funktion geschieht, sondern die CSS-Eigenschaft display http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#display in geeigneter Weise setzten. Aber wie du das machst sowie, wie du die Beziehung zwischen Tab und dem anzuzeigenden div herstellst, must du erstmal selbst heraus finden.
Noch etwas: bitte benutze, wenn du Element mit einer bestimmten id ansprechen willst, kein document.all sondern document.getElementById http://selfhtml.teamone.de/javascript/objekte/document.htm#get_element_by_idGruß Herbalizer
--
SELF-Code: (http://emmanuel.dammerer.at/selfcode.html)
sh:( fo:) ch:? rl:( br:> n4:& ie:% mo:} va:} de:] zu:) fl:{ ss:) ls:& js:|-
Hallo,
danke für die ausführliche Erklärung, es hat mir sehr geholfen den Script zu verstehe.
Zum Script, Dein Script habe ich einfach erweitert, statt meine, ich fand es einfache und schneller. Im Augenblick ist es nur ein nacktes "Gerüst" das im drei Browsern funktioniert, IE, Netscape 7.02, Phoenix 0.5, es ist nicht schön aber zweckmäßig, für Vorschläge bin ich immer offen, also wenn Du eine Idee hast zu verbessern oder zum ändern schreib mir einfach auf meine E-Mail Adresse, hier das Script:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>event.htm</title><style type="text/css">
span {border: solid 1px black;padding: 0.5px; cursor: hand;}
div>span { cursor: pointer;}
span.tab {color: red;}
span.notab {color: black;}
</style><SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
// Funktion für das hinzufügen von Events
// Weil object.onclick = function funktioniert nicht im IE
function addEvent(obj, evType, fn, useCapture)
{
if (obj.addEventListener){ // DOM2-Events-Methode
obj.addEventListener(evType,fn,useCapture);
} else if (obj.attachEvent){ // IE-Events-Methode
obj.attachEvent("on"+evType, fn);
}
}// Nimmt ein Array voller Reiter auf
var tabs;/*
wenn dokument geladen, sammle alle Reiter in einem Array und
füge ein onclick-Eventhandler für alle Reiter mit der ensprechenden
Wechselfunktion ein
*/onload = function init() {
tabs = document.getElementsByTagName('span');
for(var i = 1; i < tabs.length; i++) {
addEvent(tabs[i],"click",changeTabs,false);
}
}function changeTabs(e) // e ist ein Event
{
var number="", ausgabe_sicht="", ausgabe_ver="";
if(e.target) { // DOM2-Event für Mozilla, Opera7 und Konqueror(?)
if(e.target.nodeType == 3) { // falls das Text-node angeklickt
var obj = e.target.parentNode; // obj sei der angeklickte Reiter
} else if(e.target.nodeType == 1) { // wenns ein Element ist
var obj = e.target;
}
} else if (e.srcElement) { // IE
var obj = e.srcElement;
}
// setze alles auser dem angeklickten Reiter auf klasse notab
for(var i = 1; i < tabs.length; i++)
{
if(tabs[i] != obj)
{
tabs[i].className = 'notab';
} else {
number = i;
}
}if(number)
{
for(var j = 1; j < tabs.length; j++)
{
if(j != number)
{
document.getElementById("a"+j).style.visibility = "hidden";
} else {
document.getElementById("a"+number).style.visibility = "visible";
}
}
}
// setze angeklickten Reiter auf Klasse tab
obj.className = 'tab';
// mache noch andere Sachen die beim Reiterwechsel passieren sollen
}
//-->
</script>
</head>
<body><table CELLPADDING="0" CELLSPACING="0" border="1">
<TR>
<td>
<div>
<span class="notab" style="visibility:hidden;"></span>
<span class="tab">Klick Tab1</span>
<span class="notab">Klick Tab2</span>
<span class="notab">Klick Tab3</span>
<span class="notab">Klick Tab4</span>
<span class="notab">Klick Tab5</span>
</div>
</td>
</TR>
<TR>
<TD>
<div id="b" style="visibility:hidden;"></div>
<div id="a1" style="visibility:visible;border-width:1px;border-style:solid; border-color:blue;">id 1 </div>
<div id="a2" style="visibility:hidden;border-width:1px;border-style:solid; border-color:blue;">id 2 </div>
<div id="a3" style="visibility:hidden;border-width:1px;border-style:solid; border-color:blue;">id 3 </div>
<div id="a4" style="visibility:hidden;border-width:1px;border-style:solid; border-color:blue;">id 4 </div>
<div id="a5" style="visibility:hidden;border-width:1px;border-style:solid; border-color:blue;">id 5 </div>
</TD>
</TR>
</TABLE></body>
</html>-
Hi,
noch Mal ich, habe vergessen Abschied zu schreiben.
Grüße bernhard
-
-
-
-