Dynamiczny HTML - odcinek 1

W tym odcinku poznali╢my nastΩpuj▒ce techniki:


Pozycjonowanie bloku

Sprawdzanie wersji przegl▒darki

Odczytywanie pozycji bloku

Przesuwanie bloku

Pokazywanie i ukrywanie bloku


( spis tre╢ci )

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 */
}






poprzednia strona || nastΩpna strona

Sprawdzanie wersji przegl▒darki

    nn4 = (document.layers)? true:false
    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.

    Konstrukcja
        a = b ? 1:0
    jest skr≤towym zapisem instrukcji
        if(b) { a = 1 } else { a = 0 }

poprzednia strona || nastΩpna strona

Odczytywanie pozycji bloku

function 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µ.

poprzednia strona || nastΩpna strona

Przesuwanie bloku

function 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.


poprzednia strona || nastΩpna strona

Pokazywanie i ukrywanie bloku

function 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";
    }
}
poprzednia strona || nastΩpna strona