[ Pobierz całość w formacie PDF ]
.Użyj zmiennej objRef// przy odwoływaniu się do obiektów oraz obu zmiennych// przy odwoływaniu się do stylów.var objRef, styleRef;if (is_nav4up == true) {objRef = ""styleRef = ""}if (is_ie4up == true) {objRef = ".all"styleRef = ".style"}function alertstyle() {alert(eval("document" + objRef + ".div01" + styleRef + ".top"));}function alertobject() {alert(eval("document" + objRef + ".div02.id"));}// koniec ukrywania skryptu -->#div01 { position: absolute; }#div02 { position: absolute; } 612 Część 7.JavaScript i Dynamiczny HTMLOdwołanie dosytlówOdwołanie doobiektówWyniki wykonania tej strony zostały przedstawione na rysunku 21.4.Zwróć uwagę, iżwskaznik myszy został umieszczony na łączu wyświetlającym styl.Rysunek 21.4.Użycie funkcji tworzącejodwołania do obiektówdziałające w różnychprzeglądarkachNie chcę wprowadzać niepotrzebnego zamieszania, więc przejdę już do dwóch ćwiczeń.Zaprezentują one sposób wykrywania rodzaju przeglądarki, podmieniania obrazków,ukrywania i wyświetlania elementów stron WWW, tworzenie rozwijalnych menu orazinne techniki tworzenia kodu DHTML działającego w różnych przeglądarkach.Ogólnie rzecz biorąc, ćwiczenia te mają na celu zaprezentowanie sposobów wykony-wania poniższych zadań:połączenia HTML-a, kaskadowych arkuszy stylów oraz skryptów JavaScript w celuuzyskania przydatnych efektów DHTML,zapewnienia, że tworzone strony DHTML będą mogły poprawnie działaćna różnych przeglądarkach, co można osiągnąć poprzez sprawdzenie wersjiprzeglądarki oraz wykorzystaniu tych informacji w innych częściach skryptu,pokazanie jednej metody użycia DHTML,przedstawienia praktycznych przykładów wykorzystania możliwości DHTML.Dzięki temu będziesz mógł zobaczyć sposób praktycznego wykorzystania podanychpojęć i wykorzystać je jako podstawę do dalszej nauki. Rozdział 21.Użycie Dynamicznego HTML a 613wiczenie 21.1: Tworzenie rozwijalnych menuW pierwszym ćwiczeniu będziesz miał za zadanie stworzyć stronę zawierającą rozwi-jalne menu, wykorzystując do tego możliwości, jakie daje DHTML.Gdy użytkownikkliknie obrazek umieszczony obok opcji, menu się rozwinie, prezentując kolejne opcje.Gdy użytkownik kliknie opcję menu, odpowiadająca jej zawartość umieszczona w znacz-niku div zostanie wyświetlona w głównym obszarze okna przeglądarki.Zauważ, iżtworząc strukturę tej strony, nie użyjesz ani tabel (znaczników table), ani ramek (znacz-ników frame).Zamiast nich wykorzystasz bezwzględnie umiejscowione znaczniki div ibędziesz określał, czy są one widzialne czy nie.W tym ćwiczeniu posłużysz się także sty-lami zdefiniowanymi w nagłówku dokumentu przy użyciu znacznika style.W pierwszej kolejności stwórz szablon strony WWW, zawierający wszystkie podsta-wowe elementy jej struktury oraz komponenty, w których następnie umieścisz skrypty.Stary ceglany domKolejnym etapem będzie dodanie kodu HTML odpowiedzialnego za określenie forma-towania strony.W celu zachowania odpowiedniej struktury, elementom najwyższegopoziomu menu nadałam nazwy toc100 oraz toc200.Nazwy wszystkich elementówpodmenu 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 two-rzonej 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 roz-winięciu menu.Dodałam także zawartość strony, która będzie wyświetlana po kliknięciu odpowiedniejopcji menu.Na razie nie musisz się przejmować, że wszystkie te elementy zostaną wy-świetlone.W dalszej części ćwiczenia, poświęconej stylom, przypiszesz właściwościvisibility tych elementów wartość hidden. 614 Część 7
[ Pobierz całość w formacie PDF ]