Skrypt jest bardzo przydatny, gdy piszemy strone z różnymi przykładami. Wówczas, przykłady takie można schować i pokazać je dopiero po wciśnieciu jakiegoś przycisku. Zwiększa to czytelność takiej strony, gdyż użytkownik nie musi się przebijać przez dziesiątki linijek przykładów czy kodów źródłowych. Oby uzyskać taki efekt, w ramach HEAD wstawiamy:
<script type="text/javascript" language="javascript"><!-- // Copyright (c) May 2002 by Michał Nazarewicz (mina86@tlen.pl) // Idea by Michał Jazłowiecki (michalj@prioris.mini.pw.edu.pl) // This software is free; It's distributed under terms of GNU General Public License var theDoc=document, theAll=(theDoc.all)?theDoc.all:null; function ShowHideLayer(name, state) { if (theAll==null) return; if (arguments.length<2) state=theAll[name].style.display=="none"; theAll[name].style.display=(state)?"block":"none"; } function ButtonClick(but, name, desc1, desc2) { var state=but.value==desc1; but.value=(state)?desc2:desc1; ShowHideLayer(name,!state); } function addShowHideButton(name, desc1, desc2, state) { if (theAll==null) return; theDoc.write('<form><input type="button" value="'+(state?desc1:desc2)+ '" onclick="ButtonClick(this, \''+name+'\',\''+desc1+'\',\''+desc2+'\');" /></form>'); } //--></script>
Następnie przed każdym fragmentem który mamy zamiar ukryć:
<script language="javascript" type="text/javascript"><!-- addShowHideButton("nazwa", "opis1", "opis2", stan_poczatkowy); //--></script> <div id="nazwa">
nazwa oznacza nazwe obszaru, który chcemy ukryć. Może to być dowolny napis składający się z liter, cyfr i znaków podkreślenia, pryczym nie może zaczynać się od cyfry. Dodatkowo, nazwy nie mogą się powtarzać. Proponuję tworzenie nazw typu: "Zrodlo1Layer", czy "Przyklad1Layer". Koncowka "Layer", zwiększy czytelność kodu, gdyż wówczas bedzie wiadomo, że mamy do czynienia z warstwą.
opis1 i opis2 to teksty pokazujące się na przycisku odpowiednio, gdy warstwa jest pokazana i ukryta. Po ukryciu lub pokazaniu warstwy, napis na przycisku się zmienia.
stan_poczatkowy określa, czy na początku obszar ma być widoczny, czy nie. Jeśli tak, to przyjmuje on wartość true, a jeśli nie false.
Po całym obszarze, który chcemy ukryć, wstawiamy kod:
</div">
i jeżeli, chcemy aby na początku warstwa była ukryta jeszcze ten kod:
<script language="javascript" type="text/javascript"><!-- ShowHideLayer("nazwa",false); //--></script>
A oto przykład:
<script language="javascript" type="text/javascript"><!-- addShowHideButton("Code1Layer", "Ukryj kod", "Pokaż kod", true); //--></script> <div id="Code1Layer"><pre> <script type="text/javascript" language="javascript"><!-- // Copyright (c) May 2002 by Michał Nazarewicz (mina86@tlen.pl) // Idea by Michał Jazłowiecki (michalj@prioris.mini.pw.edu.pl) // This software is free; It's distributed under terms of GNU General Public License var theDoc=document, theAll=(theDoc.all)?theDoc.all:null; function ShowHideLayer(name, state) { if (theAll==null) return; if (arguments.length<2) state=theAll[name].style.display=="none"; theAll[name].style.display=(state)?"block":"none"; } function ButtonClick(but, name, desc1, desc2) { var state=but.value==desc1; but.value=(state)?desc2:desc1; ShowHideLayer(name,!state); } function addShowHideButton(name, desc1, desc2, state) { if (theAll==null) return; theDoc.write('<form><input type="button" value="'+(state?desc1:desc2)+ '" onclick="ButtonClick(this, \''+name+'\',\''+desc1+'\',\''+desc2+'\');" /></form>'); } //--></script> </pre></div>
Niestety, na razie skrypt działa tylko pod Microsoft Internet Explorerem 4.0+ i nowszymi Operami. Jeżeli ktos ma jakikolwiek pomysł, jak można przenieść skrypt na Netscape Communicatora/Netscape'a, proszony jest o pilny kontakt z autorem skryptu, Michałem Nazarewiczem.