“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/transitional.dtd”>
<!– Ukrywamy JavaScript
// Deklaracje zmiennych globalnych
// i stworzenie obiektów obrazków.
‘hidden’”);
eval(”document” + objRef + “.content0102″ + styleRef + “.visibility = ‘visible’”);
}
if (contentID == “0200″) {
eval(”document” + objRef + “.splash” + styleRef + “.visibility = ‘hidden’”);
eval(”document” + objRef + “.content0101″ + styleRef + “.visibility = ‘hidden’”);
eval(”document” + objRef + “.content0102″ + styleRef + “.visibility = ‘hidden’”);
eval(”document” + objRef + “.content0200″ + styleRef + “.visibility = ‘visible’”);
}
}
// zakończ ukrywanie skryptu –>
A oto pełny kod strony:
WPISZ
<!DOCTYPE html
+ “.visibility = ‘hidden’”);
eval(”document” + objRef + “.content0102″ + styleRef + “.visibility = ‘hidden’”);
eval(”document” + objRef + “.content0200″ + styleRef + “.visibility = ‘hidden’”);
eval(”document” + objRef + “.content0101″ + styleRef + “.visibility = ‘visible’”);
}
if (contentID == “0102″) {
eval(”document” + objRef + “.splash” + styleRef + “.visibility = ‘hidden’”);
eval(”document” + objRef + “.content0101″ + styleRef + “.visibility = ‘hidden’”);
eval(”document” + objRef + “.content0200″ + styleRef + “.visibility
ObjRef + “.toc0101″ + styleRef + “.visibility = ‘hidden’”);
eval(”document” + objRef + “.toc0102″ + styleRef + “.visibility = ‘hidden’”);
eval(”document” + objRef + “.toc0200″ + styleRef + “.top = ‘150′”);
show = 1;
return true;
}
}
Kolejna funkcja służy do wyświetlania zawartości strony. Także w tym przypadku będziesz musiał określić, które elementy początkowo powinny zostać ukryte, aby zrobić miejsce konieczne do wyświetlenia wybranych informacji.
WPISZ
// Funkcja do ukrywania warstw z zawartością
// oraz wyświetlania wybranej warstwy.
function showcontent() {
if (contentID == “0101″) {
eval(”document” + objRef + “.splash” +
Eval(”document” + objRef + “.toc0102″ + styleRef + “.visibility = ‘visible’”);
eval(”document” + objRef + “.toc0200″ + styleRef + “.top = ‘190′”);
show = 0;
return true;
}
if (show == 0) {
eval(”document”
Pierwsza z nich będzie wyświetlać, ukrywać oraz zmieniać położenie elementów menu. Zauważ, iż tworząc tę funkcję, wykorzystałam metodę odwoływania się do elementów DOM bez rozróżniania typu przeglądarki.
WPISZ
// Funkcja do wyświetlania i ukrywania
// podmenu.
function menuaction() {
if (show == 1) {
eval(”document” + objRef + “.toc0101″ + styleRef + “.visibility = ‘visible’”);
Do obiektów oraz obu zmiennych
// przy odwoływaniu się do stylów.
var objRef, styleRef;
if (is_nav4up == true) { //W przypadku Navigatora są puste
objRef = “”
styleRef = “”
}
if (is_ie4up == true) { //W przypadku IE – określamy wartości
objRef = “.all”
styleRef = “.style”
}
Teraz przejdziemy do funkcji zapewniających możliwości funkcjonalne
(agt.indexOf(’webtv’)==-1));
var is_nav4up = (is_nav && (is_major >= 4));
var is_ie = (agt.indexOf(”msie”) != -1);
var is_ie4up = (is_ie && (is_major >= 4));
Teraz dodaj kod służący do tworzenia poprawnych odwołań do obiektów.
WPISZ
// Konwencje odwołań do obiektów i stylów
// w Navigatorze and IE. Użyj zmiennej objRef
// przy odwoływaniu
For strzałka zwiń
ea.src = “expand.gif”;
ca.src = “contract.gif”;
var show = 1;
var contentID;
Kolejnym krokiem będzie dodanie kodu służącego do wykrywania typu i wersji przeglądarki.
WPISZ
// Uproszczona wersja wykrywania przeglądarki
// wykrywająca Navigatora 4+ oraz IE 4+.
// Użyj zmiennych is_nav4up oraz is_ie4up
// w innych częściach skryptu
var agt = navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
var is_nav = ((agt.indexOf(’mozilla’)!=-1) &&
(agt.indexOf(’spoofer’)==-1) &&
(agt.indexOf(’compatible’) == -1) &&
(agt.indexOf(’opera’)==-1)
Pisać skrypt. W pierwszej kolejności powinieneś stworzyć zmienne globalne, które będą wykorzystywane w skrypcie.
WYNIKI
Rysunek 21.5
Rozwijalne menu przed dodaniem głównego skryptu
WPISZ
// Deklaracje zmiennych globalnych
// i stworzenie obiektów obrazków.
var ea = new Image(10,10); //ea = strzałka rozwiń
var ca = new Image(10,10);
Top: 20; left: 50; }
#splash { position: absolute; top: 150; left: 200; visibility: visible; }
#toc0100 { position: absolute; top: 130; left: 20; visibility: visible; }
#toc0101 { position: absolute; top: 150; left: 50; visibility: hidden; }
#toc0102 { position: absolute; top: 170; left: 50; visibility: hidden; }
#toc0200 { position: absolute; top: 150; left: 20; visibility: visible; }
#content0101 { position: absolute; top: 150; left: 200; visibility: hidden; }
#content0102 { position: absolute; top: 150; left: 200; visibility: hidden; }
#content0200 { position: absolute; top: 150; left: 200; visibility: hidden; }
–>
Teraz można już
Strony, poszczególne opcje menu, graficzny tytuł strony oraz wyświetlane na niej informacje, powinny zostać umiejscowione bezwzględnie. Położenie poszczególnych elementów strony będziesz musiał określić metodą prób i błędów, na szczęście nie powinno to zająć wiele czasu. Zwróć uwagę, iż zarówno wszystkie elementy podmenu, jak i treść strony są początkowo ukryte (atrybutowi visibility przypisana jest wartość hidden). Później przy użyciu skryptu menu zostanie rozwinięte, a jego elementy odpowiednio rozmieszczone, aby wzajemnie siebie nie przesłaniały (patrz rysunek 21.5).
WPISZ
<!–
#title { position:
Domu zostało nieco zmodyfikowane, na przykład, przebudowano kuchnię. Nie mniej jednak z zewnątrz dom się niemal nie zmienił. Stodoła nie została natomiast w żaden sposób zmodyfikowana.
Kolejnym krokiem będzie dodanie do nagłówka dokumentu arkuszy stylów. Każdy
Href=”javascript:void(0)” onclick=”contentID=’0101′; showcontent(0101)”>Wczesne lata
Ten dom został zbudowany na początku XIX wieku. Początkowo stanowił on część farmy o powierzchni kilkuset akrów, składającej się z kilku domów oraz stodoły. Aktualnie dom oraz stodoła usytuowane są na działce o powierzchni 4 akrów.
Wszystkie te elementy zostaną wyświetlone. W dalszej części ćwiczenia, poświęconej stylom, przypiszesz właściwości visibility tych elementów wartość hidden.
WPISZ
Będzie dodanie kodu HTML odpowiedzialnego za określenie formatowania strony. W celu zachowania odpowiedniej struktury, elementom najwyższego poziomu menu nadałam nazwy toc100 oraz toc200. Nazwy wszystkich elementów podmenu zostały określone na podstawie głównego elementu menu, do którego należą. Dzięki temu, zorientowanie się w organizacji strony będzie znacznie prostsze. W tworzonej stronie posłużę się także skryptami wpisanymi, wykorzystam je do sprawdzenia, czy element menu jest aktualnie widoczny oraz do zmienienia obrazka strzałki po rozwinięciu menu.
Dodałam także zawartość strony, która będzie wyświetlana po kliknięciu odpowiedniej opcji menu. Na razie nie musisz się przejmować,
Szablon strony WWW, zawierający wszystkie podstawowe elementy jej struktury oraz komponenty, w których następnie umieścisz skrypty.
WPISZ
Kolejnym