michaelsinterface.de

exchange.display

Die CSS-Eigenschaft display steuert die Anzeigeart von HTML-Elementen; mit dem Wert none wird ein Element nicht angezeigt und im Textfluß kein Platzhalter reserviert (nachfolgende Elemente rücken nach), der Wert block erzwingt einen Block, das Element erzeugt eine neue Zeile im Textfluß.

Mit der vorgestellten Script-Funktion exchangeDisplay(id) werden diese beiden Werte getauscht, und so HTML-Elemente Im Dokument ein- und ausgeblendet.

HTML

<body>
    <div id="layer1">layer 1</div>
    <div id="layer2">layer 2</div>
    <div id="layer3">layer 3</div>
    <div id="layer4">layer 4</div>
</body>

CSS

Im zentralen Stylesheet des HTML-Dokuments werden die Elemente über ihren ID-Namen ausgeblendet:

div#layer1, div#layer2, div#layer3, div#layer4 {
display: none;
}

JavaScript I

Die Basis-Variante des Scripts frägt die display-Werte block und none ab und tauscht sie entsprechend aus:

function exchangeDisplay(id){

 if(document.getElementById(id).style.display == 'block') {
  document.getElementById(id).style.display = 'none';
 } else {
  document.getElementById(id).style.display = 'block';
 }

}

Die Funktion exchangeDisplay(id) erwartet einen Parameter, nämlich die ID des Objekts (HTML-Element), das ein- und ausgeblendet werden soll. Anschließend greift sie mittels document.getElementById auf das Objekt mit dieser ID zu, überprüft seinen Wert für die CSS-Eigenschaft display und tauscht ihn entsprechend aus - von block auf none, und umgekehrt.

Der Aufruf der Funktion exchangeDisplay('ID-name') wird im onclick-Eventhandler notiert:

<div>
    <a href="#" onclick="exchangeDisplay('layer1');return false;">layer 1</a>
    <a href="#" onclick="exchangeDisplay('layer2');return false;">layer 2</a>
    <!-- usw. -->
</div>

Anmerkung: Mit return false wird in diesem Beispiel verhindert, dass beim Klicken des Links wegen dem "leeren Ankername" im Attribut href="#" nicht zum Seitenanfang gesprungen wird.

JavaScript II

Diese erweiterte Funktion tauscht nun analog zum display-Wert zwei Grafiken aus:

function exchangeDisplay(id){

 var img = 'img_' + id;
 if(document.getElementById(id).style.display == 'block') {
  document.getElementById(id).style.display = 'none';
  document.getElementById(img).src = 'img/closed.png'; // Grafik referenzieren
 } else {
  document.getElementById(id).style.display = 'block';
  document.getElementById(img).src = 'img/opened.png'; // Grafik referenzieren
 }

}

Die Funktionsweise des Scripts ist die gleiche, wie in der Basis-Variante, allerdings stellt sie vor die zu übergebende ID ein img_. Diese neue ID img_layer1 ist die ID der Grafik, die beim Auf- und Zuklappen des Elements mit der ID layer1 getauscht werden soll.

Hierzu werden zwei Grafiken benötigt, die den jeweiligen display -Wert symbolisieren:

  •   |    |  closed.png : none
  •   |    |  opened.png : block

Dem Grafikelement 'closed.png' wird die ID img_ID-name zugewiesen und innerhalb des Links eingebettet - also:

<div>
    <a href="#" onclick="exchangeDisplay('layer1');return false;">
        <img src="img/closed.png" id="img_layer1" border="0" alt="">layer 1
    </a>
    <a href="#" onclick="exchangeDisplay('layer2');return false;">
        <img src="img/closed.png" id="img_layer2" border="0" alt="">layer 2
    </a>
    <!-- usw. -->
</div>

Anmerkung: Bei der Verwendung von Grafiken mit anderen Dateinamen und -endungen (*.gif, *.jpg), ist dies in der Script-Funktion zu berücksichtigen und entsprechend anzupassen. Ebenso ist die korrekte Referenzierung der Grafiken zu beachten:

  • im gleichen Verzeichnis
document.getElementById(img).src = 'closed.png';
document.getElementById(img).src = 'opened.png';
  • im Unterverzeichnis 'img'
document.getElementById(img).src = 'img/closed.png';
document.getElementById(img).src = 'img/opened.png';
  • im übergeordneten Verzeichnis 'img'
document.getElementById(img).src = '../img/closed.png';
document.getElementById(img).src = '../img/opened.png';

Treeview

Die Struktur ist beliebig erweiterbar und kann als 'Treeview' eingesetzt werden, der weitere dynamische Elemente (= Sub-Elemente) enthält:

  • layer 5
    • layer 5_sub1
      • item 5.1.1
      • item 5.1.2
      • item 5.1.3
    • layer 5_sub2
      • layer 5_sub2.1
        • item 5.2.1.1
        • item 5.2.1.2
        • item 5.2.1.3
      • item 5.2.2
      • item 5.2.3

HTML-Code Treeview-Demo


 <ul id="layer5">
     <li>
        <a href="#" onclick="exchangeDisplay('layer5_sub');return false;">
            <img src="img/closed.png" id="img_layer5_sub" alt="" />layer 5
        </a>
        <ul id="layer5_sub">
            <li>
                <a href="#" onclick="exchangeDisplay('layer5_sub1');return false;">
                    <img src="img/closed.png" id="img_layer5_sub1" alt="" />layer 5_sub1
                </a>
                <ul id="layer5_sub1">
                    <li> item 5.1.1</li>
                    <li> item 5.1.2</li>
                    <li> item 5.1.3</li>
                </ul>
             </li>
             <li>
                <a href="#" onclick="exchangeDisplay('layer5_sub2');return false;">
                    <img src="img/closed.png" id="img_layer5_sub2" alt="" />layer 5_sub2
                </a>
                <ul id="layer5_sub2">
                    <li>
                        <a href="#" onclick="exchangeDisplay('layer5_sub2_1');return false;">
                            <img src="img/closed.png" id="img_layer5_sub2_1"  alt="" />layer 5_sub2_1
                        </a>
                        <ul id="layer5_sub2_1">
                            <li> item 5.2.1.1</li>
                            <li> item 5.2.1.2</li>
                            <li> item 5.2.1.3</li>
                        </ul>
                    </li>
                    <li> item 5.2.2</li>
                    <li> item 5.2.3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Quelltext

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>::: exchange.display :::</title>

<script type="text/javascript">
function exchangeDisplay(id){
 var img = 'img_' + id;
 if(document.getElementById(id).style.display == 'block') {
  document.getElementById(id).style.display = 'none';
  document.getElementById(img).src = 'img/closed.png'; // Grafik referenzieren
 } else {
  document.getElementById(id).style.display = 'block';
  document.getElementById(img).src = 'img/opened.png'; // Grafik referenzieren
 }
}
</script>

<style type="text/css">
#layer1, #layer2, #layer3, #layer4 {
background-color: #dfdfdf;
border-bottom: 1px solid #8daebf;
padding: 5px;
}
#layer1, #layer2, #layer3, #layer4 {
display: none;
}
a {
display: block;
margin-bottom: 8px;
text-decoration: none;
color: #708ba4;
}
a:hover {
color: #c0dbf4;
}
</style>

</head>
<body>

<div>
    <a href="#" onclick="exchangeDisplay('layer1');return false;">
        <img src="img/closed.png" id="img_layer1" border="0" alt="">collapse.layer 1
    </a>
    <div id="layer1"> :: layer 1 </div>
    <a href="#" onclick="exchangeDisplay('layer2');return false;">
        <img src="img/closed.png" id="img_layer2" border="0" alt="">collapse.layer 2
    </a>
    <div id="layer2"> :: layer 2 </div>
    <a href="#" onclick="exchangeDisplay('layer3');return false;">
        <img src="img/closed.png" id="img_layer3" border="0" alt="">collapse.layer 3
    </a>
    <div id="layer3"> :: layer 3 </div>
    <a href="#" onclick="exchangeDisplay('layer4');return false;">
        <img src="img/closed.png" id="img_layer4" border="0" alt="">collapse.layer 4
    </a>
    <div id="layer4"> :: layer 4 </div>
</div>

</body>
</html>