Tajniki DHTML


Ukrywanie i pokazywanie warstw

Wiesz już, jak pisać osobny kod dla każdej z przeglądarek. Jednakże nie tylko sposób dotarcia do samych właściwości jest różny w zależności od przeglądarki - inne są także opcje tych właściwości. Wymienione już były różnice przy opisie właściwości visibility, określającej widoczność warstwy. Chcąc napisać funkcję do pokazywania i chowania warstwy, należy o tej różnicy pamiętać. Przykładowe funkcje są przedstawione poniżej:

function show(ident) {

if(ns4) {

document.layers[ident].visibility = "show";

} else if(ie4) {

document.all[ident].style.visibility = "visible";

}

}

function hide(ident) {

if(ns4) {

document.layers[ident].visibility = "hide";

} else if(ie4) {

document.all[ident].style.visibility = "hidden";

}

}

Teraz chcąc zmienić widzialność warstwy, należy zawsze wywołać funkcje show('nameDiv') w przypadku jej pokazania lub hide('ameDiv') w przypadku jej schowania. Przy użyciu tych funkcji można wykonać najróżniejsze rozwiązania menu rozwijanego, wyświetlać odpowiednie fragmenty strony w zależności od wybranych opcji itp.

Poruszanie warstw - animacja

Pozycjonowanie to też zmiana. Do wykonania tego polecenia wystarczy nadanie nowych wartości parametrom top lub left. Problem pojawia się przy odczycie tych informacji z obiektu. Internet Explorer podaje informacje o pozycji z prefiksem px. Dlatego przy odczycie wartości zalecane jest stosowanie funkcji parseInt(), która zamieni odczytaną wartość na liczbę całkowitą. Poniżej przedstawiono odpo- wiedni zapis:

parseInt(document.all['nameDiv'].style.top)

Wartości początkowe można też zapisać w innych zmiennych i wszelkie zmiany umieszczać w tych nowo utworzonych zmiennych. Jeżeli zmian dokonuje się w jednej warstwie, taką zmienną może być zmienna lokalna. W przypadku zmian w wielu warstwach nic nie stoi na przeszkodzie, aby zmienne te dołożyć jako nowe w danej warstwie. Na początek zachowujesz wartości początkowe:

if (ns4) namediv = document.nameDiv;

if (ie4) namediv = nameDiv.style;

namediv.left=100;

namediv.top=150;

zapisujemy dla uproszczenia w zmiennej namediv opis obiektu:

namediv.xpos = parseInt(namediv.left);

namediv.ypos = parseInt(namediv.top);

Teraz można zapisać funkcje zmieniającą wartości położenia:#

function move(X,Y) {

namediv.xpos=X;

namediv.ypos=Y;

namediv.left=namediv.xpos;

namediv.top=namediv.ypos;

}

Jest to przykład dla jednej warstwy o identyfikatorze nameDiv. Można oczywiście rozwinąć zapisany kod na dowolne warstwy, wprowadzając zmienną przesyłaną do funkcji jako parametr.

Wadą tego rozwiązania jest konieczność pamiętania o aktualizowaniu dodatkowo wprowadzonych zmiennych, a następnie ustawienie właściwych zmiennych warstwy, zaletami zaś - pewność, że odczytane położenie jest niezależne od przeglądarki, i to, że nie trzeba stosować funkcji parseInt().

Wykorzystując powyższe rozwiązania, można napisać funkcję przesuwającą dowolny obiekt w nowe położenie lub funkcję przesuwającą o wskazaną odległość. Poniżej przedstawiono takie funkcje.

function moveTo(ident,X,Y) {

ident.xpos = X;

ident.left = ident.xpos;

ident.ypos = Y;

ident.top = ident.ypos;

}

function moveBy(ident,X,Y) {

ident.xpos += X;

ident.left = ident.xpos;

ident.ypos += Y;

ident.top = ident.ypos;

}

Wykorzystując te rozwiązania, można napisać funkcję, która wykona animację warstwy. W ten sposób można wykonać menu, które będzie się płynnie rozwijało i zwijało lub płynną animację logo firmy, co uatrakcyjnia stronę. Do wykonania takiej animacji będzie wykorzystana jeszcze jedna standardowa funkcja setTimeout(). Na następnej stronie przedstawiono funkcję wykonującą animację w poziomie.

function moving() {

if (namediv.xpos < 100) {

namediv.xpos += 1;

namediv.left = namediv.xpos;

setTimeout("moving()",100)

}

}

Warunek if kończy animację. Jeżeli współrzędna lewego boku warstwy będzie większa od 100 pikseli, to funkcja nie wykona żadnych operacji i animacja zostanie zatrzymana. Funkcja setTimeout() spowoduje, że po 100 milisekundach będzie wykonana funkcja moving, co powoduje utworzenie pętli z opóźnieniem 100 milisekundowym. Można teraz modyfikować w dowolny sposób tę funkcję przez dodanie parametru top, lub podając kąt i wyliczając współrzędne pionowe i poziome.