Tajniki DHTML


Ograniczanie widoczności warstwy

Każda warstwa ma właściwość określającą pole jej widoczności. Jest to prostokąt, przez którego okno widać warstwę (wszystko poza tym ograniczeniem jest ukryte). Można również zdefiniować większe pole niż wielkość warstwy, zwiększając tym samym jej widoczność.

Wartości pola ograniczającego są podawane jako odległości w pikselach od górnego lewego rogu warstwy. Na poniższym rysunku przedstawione zostały wymiary, które należy zdefiniować, podając okno ograniczające.

Należy zachować kolejność podawania wymiarów. Zapis jest identyczny dla obu przeglądarek. Różnice pojawiają się wtedy, gdy chcesz odczytać lub zmienić dane okna widoczności. W przypadku NetscapeŐa możesz odczytać każdą wartość osobno:

document.nameDiv.clip.top;

document.nameDiv.clip.right;

document.nameDiv.clip.bottom;

document.nameDiv.clip.left;

W identyczny sposób można przypisać nowe wartości współrzędnym. Przeglądarka Expolorer nie potrafi odczytywać pojedynczych wartości, więc aby zmienić jedną wartość, należy podać wszystkie naraz. Poniżej przedstawiono przykładową zmianę wartości:

document.nameDiv.style.clip = "rect(10, 100, 120, -10)";

Taka forma dotarcia do właściwości jest bardzo niewygodna. Można, tak jak w przypadku poruszania warstw, dodać nowe właściwości przechowujące dane o wymiarach okna przysłaniającego warstwę. Poniżej przedstawiona jest funkcja inicjująca okno:

document.nameDiv.t=10;

document.nameDiv.r=100;

document.nameDiv.b=120;

document.nameDiv.l=-10;

document.nameDiv.style.clip = rect(t, r, b, l);

Teraz można zmienić wartość jednej z właściwości, a następnie ustawić wszystkie wartości. Zaletą rozwiązania jest łatwość uzyskiwania informacji o jednej z właściwości bez wyłuskiwania jej z ciągu wszystkich wymiarów.

Zagnieżdżanie warstw

Często trzeba zmienić wartości kilku warstw naraz. Można pogrupować kilka warstw i umieścić je w jednej, którą będziemy ukrywać lub pokazywać albo zmieniać jej położenie. Zmiana tych właściwości będzie wpływała na parametry warstw umieszczonych na głównej warstwie. Jeżeli umiejscowi się warstwę X w warstwie Y, to współrzędne położenia będą podane względem warstwy zewnętrznej, czyli Y. Gdy warstwa wewnętrzna zostanie ulokowana poza polem widoczności warstwy zewnętrznej, nie będzie widoczna.

Zagnieżdżanie warstw przebiega odmiennie w wypadku obu najpopularniejszych przeglądarek. Niestety, Netscape jest w tym punkcie bardzo niedopracowany: zagnieżdżone warstwy nie zawsze są interpretowane poprawnie. Utworzenie dwóch zagnieżdżonych warstw powoduje, że wszystkie style ustawione w dalszej części kodu są ignorowane. Najlepszym sposobem unikania problemów w Netscapie jest używanie stylów zdefiniowanych w bloku STYLE, a nie jako parametr w znaczniku DIV.

Usunięcie problemów w Netscapie powoduje ich powstanie w Explorerze. Jeżeli zapiszesz definicję stylu w znaczniku STYLE, nie można będzie odczytać wartości początkowych warstwy, takich jak położenie, szerokość, wysokość, widzialność. Gdy w kodzie zostaną one zmienione na nowe, to kolejne odczytanie tych wartości nie będzie możliwe. Na szczęście Microsoft wprowadził kilka dodatkowych właściwości, które można zastosować do rozwiązania tego problemu. Są to następujące parametry:

offsetX - wartość położenia x warstwy

offsetY - wartość położenia y warstwy

offsetWidth - szerokość warstwy

offsetHeight - wysokość warstwy

Teraz zamiast używać właściwości top, left itd. w Explorerze należy zastosować wyżej wymienione parametry.

Poniżej przedstawiono przykład, w którym zdefiniowana jest jedna warstwa i dwie warstwy zagnieżdżone.

<DIV ID="nameDiv">

<DIV ID="subDiv1">

.........

</DIV>

<DIV ID="nameDiv2">

.........

</DIV>

</DIV>

Warstwy z identyfikatorem subDiv1 i subDiv2 będą pozycjonowane względem warstwy o identyfikatorze nameDiv. Zagnieżdżać można jeszcze bardziej w głąb, to znaczy utworzyć kolejną zagnieżdżoną warstwę na przykład w warstwie subDiv1.

Aby dotrzeć do właściwości warstwy zagnieżdżonej, należy zastosować taką samą zasadę jak w przypadku zamiany grafiki umieszczonej na warstwie. Dla Internet Explorera nie ma znaczenia, że warstwa jest zagnieżdżona w drugiej. Odwołanie do jej właściwości jest takie, jakby ta warstwa była umieszczona pojedynczo na stronie. W Netscapie najpierw należy odwołać się do warstwy pierwszej a następnie do podwarstwy. Przykład dotarcia do właściwości zagnieżdżonej warstwy subDiv1 pokazano na poniższym fragmencie kodu:

if (ie4) subDiv1.style.propertyName;

else if (ns4) document.nameDiv.document.subDiv1.propertyName;

Chcąc uniknąć wpisywania osobnego kodu dla Netscape'a i dla Internet Explorera, należy zapisać w zmiennych przypisania do warstw zagnieżdżonych. Następnie można odwoływać się do właściwości przez wprowadzone zmienne. Funkcja inicjująca pokazana jest poniżej:

if (ie4) subdiv1=subDiv1.style;

else if (ns4) subdiv1=document.nameDiv.document.subDiv1;

subdiv1.propertyName;