Ukrywanie fragmentów strony

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>
&lt;script type="text/javascript" language="javascript"&gt;&lt;!--
// 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&lt;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('&lt;form&gt;&lt;input type="button" value="'+(state?desc1:desc2)+
	'" onclick="ButtonClick(this, \''+name+'\',\''+desc1+'\',\''+desc2+'\');" /&gt;&lt;/form&gt;');
}
//--&gt;&lt;/script&gt;
</pre></div>

Niestety, na razie skrypt działa tylko pod Microsoft Internet Explorerem 4.0+. Jeżeli ktos ma jakikolwiek pomysł, jak można przenieść skrypt na Netscape Communicatora, Netscape'a czy Operę, proszony jest o pilny kontakt z autorem skryptu, Michałem Nazarewiczem.

Web Analytics

Clicky