Klassenerweiterung eines Java-Script von Peter, 06.08.2006 23:09

Klassenerweiterung eines Java-Script

Peter 06.08.2006 14:38

javascript

Hab hier ein kleines Modell des eigentlichen Problems. Das Problem eigentliche Problem bei der Sache ist dass ich die drei Abschnitte getrennt voneinander steuern möchte.

Also ich erklärs mal so:
Ich habe eine Übersichtsseite mit mehreren Diagrammen (ca.15) welche unterhalb der Links sind und durch betätigen der Links verändert sich die Ansicht des Diagramms. Was durch die Farbgebung der einzelnen Links verdeutlicht werden sollte. Deswegen ist auch in diesem Beispiel schon von Start an der erste rot hinterlegt.
Und immer wenn ich ein anderes anwähle soll natürlich dieses rot hinterlegt werden.

Nur ist es momentan so, dass es lediglich für ein einziges Diagramm funktionieren würde, da ich die Abschnitte bzw. Diagramme in Klassen einteilen muss damit richtig funktioniert!

Hoffe das ist nach dem zweitenmal durchlesen verständlich ;)

<html>  
<head>  
<title>Unbenannt</title>  
  
<style type="text/css">  
<!--  
a {  
 font-family: Verdana, Arial;  
         color: #000000;  
         text-decoration: none;  
          background-color: #EEEEEE;  
}  
-->  
</style>  
  
<script type="text/javascript">  
  function save(sav)  
  {  
    document.getElementsByName('peter')[0].value = sav;  
  }  
  function CChange(name)  
  {  
    id = name;  
    document.getElementById(id).style.color = "#FFFFFF"; /* farbe des letzten inks */  
    document.getElementById(id).style.backgroundColor = "#AA00AA"; /* Hintergrundfarbe des letzten inks */  
    save(id);  
  }  
  function load(id)  
  {  
    vall = document.getElementsByName('peter')[0].value;  
    document.getElementById(vall).style.color = "#000000"; /* normale link-farbe */  
    document.getElementById(vall).style.backgroundColor = "#EEEEEE"; /* normale link-Hintergrundfarbe */  
    CChange(id);  
  }  
  
    function red()  
    {  
      document.getElementById('link1').style.color = "#FFFFFF";  
      document.getElementById('link1').style.backgroundColor = "#AA00AA";  
  
      document.getElementById('link4').style.color = "#FFFFFF";  
      document.getElementById('link4').style.backgroundColor = "#AA00AA";  
  
      document.getElementById('link7').style.color = "#FFFFFF";  
      document.getElementById('link7').style.backgroundColor = "#AA00AA";  
    }  
</script>  
  
</head>  
  
<body onload="javascript:red()">  
  
  
<input type="hidden" name="peter" value="link1">  
  
<a href="#" onclick="javascript:load(this.id)" id="link1">bla 1</a>  
<br><br>  
<a href="#" onclick="javascript:load(this.id)" id="link2">blö 1</a>  
<br><br>  
<a href="#" onclick="javascript:load(this.id)" id="link3">blub 1</a>  
  
  
<br><br><br><br><br>  
  
  
<a href="#" onclick="javascript:load(this.id)" id="link4">bla 2</a>  
<br><br>  
<a href="#" onclick="javascript:load(this.id)" id="link5">blö 2</a>  
<br><br>  
<a href="#" onclick="javascript:load(this.id)" id="link6">blub 2</a>  
  
  
<br><br><br><br><br>  
  
  
<a href="#" onclick="javascript:load(this.id)" id="link7">bla 3</a>  
<br><br>  
<a href="#" onclick="javascript:load(this.id)" id="link8">blö 3</a>  
<br><br>  
<a href="#" onclick="javascript:load(this.id)" id="link9">blub 3</a>  
  
</body>  
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

Klassenerweiterung eines Java-Script
molily Homepage des Autors 06.08.2006 15:51

javascript
+2 Informationen zu den Bewertungsregeln
Hallo,

Ich würde das so lösen:
```
<script type="text/javascript" src="http://dean.edwards.name/base/forEach.js"></script>  
<script type="text/javascript">  
[code lang=javascript]function init () {  
 forEach(  
  document.getElementsByTagName("ul"),  
  function (ul_element) {  
   forEach(  
    ul_element.getElementsByTagName("button"),  
    function (button_element) {  
     button_element.correspondingList = ul_element;  
     button_element.onclick = activate;  
    }  
   );  
  }  
 );  
}  
window.onload = init;  
function activate () {  
 if (this.correspondingList.activeButton) {  
  this.correspondingList.activeButton.className = "";  
 }  
 this.className = "active";  
 this.correspondingList.activeButton = this;  
}
```
</script>
<style type="text/css">
```
button.active { color:red; }  
ul, li { list-style-type:none; margin-left:0; padding-left:0; }
```
</style>

<ul>
<li><button>Link 1</button></li>
<li><button>Link 2</button></li>
<li><button>Link 3</button></li>
</ul>

<ul>
<li><button>Link 1</button></li>
<li><button>Link 2</button></li>
<li><button>Link 3</button></li>
</ul>

<ul>
<li><button>Link 1</button></li>
<li><button>Link 2</button></li>
<li><button>Link 3</button></li>
</ul>[/code]

Erst einmal lage ich die JavaScript-Logik aus. Im HTML definiere ich lediglich drei Listen mit Buttons.

Beim fertigen Laden wird eine Funktion gestartet, die alle Listen des Dokuments durchläuft und darin alle Buttons. Jedem Button gibt sie einen onclick-Handler und speichert zudem eine Referenz auf die zugehörige Liste als Eigenschaft am button-Elementobjekt. (Man kann in JavaScript jedem Objekt Eigenschaften anhängen. So kann man bequem direkt am Element eine Referenz auf das ul-Elementobjekt speichern, die man in der Event-Handler-Funktion ebenso bequem benutzen kann.)

Um die Listen mit Elementknoten einfach zu durchlaufen, die document.getElementsByTagName zurückgibt, nutze ich eine externe Funktion namens forEach aus http://dean.edwards.name/base/forEach.js. Die sorgt einfach dafür, dass für jedes Element in der Liste die notierten anonymen Funktioen ausgeführt werden. Man kann aber auch einfach mit simplen verschachtelten for-Schleifen arbeiten, aber der Code wird dadurch schnell sehr lang und unübersichtlich. (Es gibt noch weitere Funktionssammlungen, die einem das Vergeben von Event-Handlern an bestimmte Elemente im Dokument noch besser vereinfachen, z.B. jQuery. Das aber nur am Rande.)

Beim Klicken auf einen Button startet die Funktion activate. Die greift über this auf das button-Elementobjekt zu, bei dem der click-Event passierte. Daran hängt ja die Eigenschaft correspondingList, welche auf das zugehörige ul-Elementobjekt verweist. Wenn also an diesem Objekt eine Eigenschaft activeButton existiert, dann setze deren Eigenschaft className.

Das ergibt Sinn, wenn man den Rest der Funktion activate betrachtet: Darin wird die Klasse auf aktice gesetzt und danach eine Eigenschaft namens activeButton am ul-Elementobjekt angelegt. Darin wird eine Referenz auf das gerade aktivierte button-Elementobjekt gespeichert. Am Anfang der Funktion wird also die Klasse dieses zuletzt aktivierten Buttons zurückgesetzt.

Mathias
Beitrag melden

+2
Informationen zu den Bewertungsregeln