W tym odcinku poznaliśmy następujące techniki: Pozycjonowanie bloku Sprawdzanie wersji przeglądarki Odczytywanie pozycji bloku Przesuwanie bloku Pokazywanie i ukrywanie bloku |
Pozycjonowanie bloku#blokDiv {position:absolute;left:50; top:100; /* pozycja lewego górnego rogu */ width:200; height:120; /* szerokość i wysokość */ clip:rect(0,200,120,0); /* widoczny prostokąt bloku */ background-color:red; /* kolor tła dla IE4 */ layer-background-color:red /* kolor tła dla NN4 */ } |
Sprawdzanie wersji przeglądarki
ie4 = (document.all)? true:false Najprostszy sposób sprawdzenia wersji przeglądarki wykorzystuje różnicę pomiędzy modelami obiektów dokumentu obu przeglądarek. W modelu Explorera nie istnieje obiekt layers i podobnie Navigator nie rozpoznaje obiektu all.
a = b ? 1:0 jest skrótowym zapisem instrukcji if(b) { a = 1 } else { a = 0 } |
Odczytywanie pozycji blokufunction pozycja(ident) {if(nn4) { // przeglądarką jest Navigator l = document.layers[ident].left; t = document.layers[ident].top; } else if(ie4) { // przeglądarką jest Explorer l = document.all[ident].style.pixelLeft; t = document.all[ident].style.pixelTop; } alert('Położenie ' + ident + ': od lewej = ' + l + ', od góry = ' + t); } Parametr ident jest identyfikatorem bloku, którego położenie chcemy odczytać. |
Przesuwanie blokufunction moveTo(ident,x,y) {if(nn4) { // przeglądarką jest Navigator document.layers[ident].left = x; document.layers[ident].top = y; } else if(ie4) { // przeglądarką jest Explorer document.all[ident].style.left = x; document.all[ident].style.top = y; } } Parametr ident jest identyfikatorem bloku, którego położenie chcemy zmienić. Parametry x i y to nowe położenie bloku. |
Pokazywanie i ukrywanie blokufunction show(ident) { // pokażif(nn4) { // Navigator document.layers[ident].visibility = "show"; } else if(ie4) { // Explorer document.all[ident].style.visibility = "visible"; } } function hide(ident) { // ukryj if(nn4) { // Navigator document.layers[ident].visibility = "hide"; } else if(ie4) { // Explorer document.all[ident].style.visibility = "hidden"; } } |