Dynamic Duo - Warstwy generowane
loc = "../"
document.write(toccss)
document.write(tochtml)
Warstwy generowane
Generowanie warstw to dość łatwa do zrozumienia idea która ma mnóstwo zastosowań, szczególnie podczas tworzenia całych serwisów w DHTML-u, lub też przy wkraczaniu w bardziej rozbudowany kod DHTML. Korzystając z komendy document.write możemy generować odpowiednie dla naszych potrzeb tagi CSS i DIV.
Generowanie warstw daje nam mnóstwo ciekawych możliwości:
możemy stworzyć warstwę pojawiającą się w losowym miejscu
możemy wygenerować setki warstw w odpowiedniej kolejności
możemy centrować warstwy lub ustawiać je odpowiednio do wymiarów okna przeglądarki
możemy utworzyć obiekty które generują tagi CSS i DIV na własne potrzeby
Pokażę teraz jak możesz wykonać każde z powyższych zadań.
Podstawy
Generacja warstwy jest bardzo prosta. Wystarczy użyć polecenia document.write() do wypisania odpowiednich tagów CSS i DIV. Jedynym trikiem jest to, że musisz wypisywać tag
<STYLE> razem z CSS. Jeśli tego nie zrobisz, Netscape nie będzie prawidłowo renderował zawartości takiej warstwy. Okazało się, że generacja w sposób jaki przedstawiłem poniżej jest w większości przypadków prawidłowa:
var str = '<STYLE TYPE="text/css">\n'+
'#mylayerDiv {position:absolute; left:50; top:70; width:80; height:20; clip:rect(0,80,20,0); background-color:yellow; layer-background-color:yellow;}\n'+
'</STYLE>'
document.write(str)
Zwykle nie ma tutaj problemów w IE, ale w przypadku Netscape kilka się niestety znalazło. Jeśli chcesz uniknąć późniejszych bólów głowy - przeczytaj:
pisz CSS opakowany w SCRIPT albo w sekcji HEAD, albo natychmiast po tagu BODY
nie dopuść do pisania tagu STYLE wewnątrz innej warstwy, to zadziała tylko wtedy, kiedy warstwa jest spozycjonowana relatywnie. Nie będę rozwijał tego problemu, jeśli chcesz - eksperymentuj.
w celu uproszczenia i zwiększenia efektywności pisz swój cały kod CSS w tym samym momencie tworząc łańcuchy tekstu.
ABSOLUTNIE NIE wypisuj \n na końcu tagu </STYLE>. Wczesne wersje Netscape (4.0 - 4.05) miały błąd którego wykrycie zajęło mi długie miesiące i nauczyło nigdy tego nie robić. Nie wiem dlaczego, ale jeśli wypiszesz \n na końcu tagu STYLE i wygenerujesz go przez document.write() w stronie która zawiera dużo tekstu, gdzieś w środku tego tekstu pojawi się przerwanie linii.
Zastosuj się do tych zaleceń a wszystko będzie w porządku.
Często nie jest konieczne zamykanie w tagi SCRIPT kodu warstw DIV. Będziesz tego potrzebował jeśli planujesz stworzenie osobnego obiektu, lub wygenerowanie wielu podobnych warstw. Generalnie działa to tak jak oczekujesz:
<SCRIPT LANGUAGE="JavaScript">
str = '<DIV ID="mylayerDiv">my layer</DIV>'
document.write(str)
</SCRIPT>
Zawsze umieszczaj warstwy DIV w sekcji BODY dokumentu.
Prosty wzorzec wygląda mniej więcej tak:
<HTML>
<HEAD>
<TITLE>Dynamic Duo - Generowanie warstw - Przykład [Prosty]</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var str = '<STYLE TYPE="text/css">\n'+
'#mylayerDiv {position:absolute; left:50; top:70; width:100; height:20; clip:rect(0,100,20,0); background-color:yellow; layer-background-color:yellow;}\n'+
'</STYLE>'
document.write(str)
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SCRIPT LANGUAGE="JavaScript">
<!--
var str = '<DIV ID="mylayerDiv">my layer</DIV>'
document.write(str)
//-->
</SCRIPT>
</BODY>
</HTML>
Zobacz generate1-simple.html jako powyższy przykład.
Zobacz kod źródłowy
Funkcja css()
W celu ułatwienia sobie życia napisałem funkcję która generuje odpowiedni kod CSS. W ten sposób uwalniamy się od ciągłego pisania left, top, width itd. dla każdej warstwy. Uzyskujemy też ładniejszy i czystszy oraz mniejszy kod. Tak naprawdę, okazało się po napisaniu tych funkcji, że są one tak użyteczne, że zdecydowałem się więcej nie pisać CSS ręcznie. Ze względu na ich ogromną przydatność włączyłem je także do mojego DynLayer. Jeśli potrzebujesz możesz dodać tylko funkcje css jeśli nie korzystasz z DynLayer:
Kod źródłowy Funkcji CSS:
Ściągnij: css.js
Zobacz kod: css.js
Składnia wywołania funkcji css():
css(id,left,top,width,height,color,vis,z,other)
Pominąwszy poniższe uwagi, funkcja css() powinna być zrozumiała bez problemu...
Warte uwagi jest to, jak pracuję z wartościami szerokości i wysokości przycinania warstwy. W 99% przypadków kiedy chcesz ustawić wymiary warstwy będziesz przycinał ją do takich samych wymiarów. Na przykład, jeśli chcesz utworzyć kolorowy prostokąt, będziesz chciał ustawić szerokośc i wysokość warstwy tak samo jak wartości right i bottom przycinania (clip). Z drugiej strony, jeśli tylko wypisujesz tekst albo pokazujesz obrazek, nie musisz w ogóle przycinać warstwy i w związku z tym nie musisz ustawiać wartości clip. Tak więc funkcja działa następująco - jeśli ustawisz wysokość, automatycznie ustawione zostaną wartości przycinania na (0, szerokość, wysokość, 0) - co jest najczęściej spotykanym przypadkiem.
Kiedy natomiast chcesz aby wartości przycinania były różne od szerokości i wysokości warstwy możesz użyć własności other i wysłać Twój własny kod CSS 'clip:rect()'. Zostaną wtedy wypisane Twoje wartości przycinania warstwy zamiast utworzenia ich na podstawie szerokości i wysokości.
Możesz także stworzyć warstwę spozycjonowaną relatywnie przez podanie null jako wartości left i top. Oczywiście każdą wartość któej nie potrzebujesz możesz zastapić przez null i nie zostanie wtedy wypisana. Przez przekazanie ID równego "START" lub "END" funkcja wypisze odpowiednie początkowe lub końcowe tagi STYLE.
Przykłady:
// zwraca "#mylayer {position:absolute; left:50px; top:100px;}"
css('mylayer',50,100)
// zwraca "#mylayer {position:relative; width:200px; background-color:#ff0000; layer-background-color:#ff0000;}"
css('mylayer',null,null,200,null,'#ff0000')
// zwraca "#mylayer {position:absolute; left:50px; top:100px; width:200px; height:200px; clip:rect(0px 200px 200px 0px);}"
css('mylayer',50,100,200,200)
W tej funkcji są także dwie opcje:
css('START') // zwraca "<style type="text/css">"
css('END') // zwraca "</style>"
A teraz przykład korzystania z funkcji css() do utworzenia warstwy:
var str = css('START')+
css('mylayerDiv',50,100)+
css('END')
document.write(str)
Zmienna łańcuchowa str zawiera teraz cały kod CSS potrzebny do utworzenia warstwy. Wystarczy tylko wypisać go za pomocą document.write(str). Uważaj, żeby wypisywać tylko jeden zestaw CSS. Jeśli spróbujesz zrobić to dwa razy przeglądarka Netscape 4.0 i 4.01 zawiesi się. Jeśli jest to absolutnie konieczne, możesz umieścić każdy generowany kod CSS w osobnych tagach <script>.
Funkcja writeCSS()
writeCSS(str,showAlert)
Funkcja writeCSS() (także zawarta w css.js) upraszcza trochę naszą pracę. Parametr str zawiera całość naszego kodu który potrzebujemy do generacji warstwy. Funkcja writeCSS() automatycznie dodaje css('START') i css('END') na początku i końcu łańcucha i wypisuje rezultat na stronę:
writeCSS (
css('mylayerDiv',50,100)
)
Funkcja writeCSS() zawiera także opcję showAlert która powoduje otworzenie okienka dialogowego Alert z zawartością łańcucha wypisanego na stronę. Opcja ta jest tylko wykorzystywana do poszukiwania błędów.
writeCSS (
css('mylayer1Div',50,100)+ // musisz połączyć wywołania css() razem
css('mylayer2Div',50,100)+
css('mylayer3Div',50,100)
,1) // wyślij wartość "prawda" (lub 1) aby wywołać okienko Alert
Tak więc kombinacja tych dwóch funkcji jest naprawdę świetna jeśli planujesz tworzyć dużo warstw. W dalszej części podręcznika będę ich często używał. A teraz ostatni przykład warstwy bazowany na funkcjach CSS:
<html>
<head>
<title>Dynamic Duo - Warstwy generowane [Funkcje CSS]</title>
<script language="JavaScript" src="../dynapi/css.js"></script>
<script language="JavaScript">
<!--
writeCSS(
css('mylayerDiv',50,70,100,20,'yellow')
)
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="mylayerDiv">my layer</div>
</body>
</html>
Zobacz generate2-cssfunction.html powyższy przykład w działaniu. Zobacz kod źródłowy .
Teraz, kiedy już mamy dobry sposób na generowanie warstw, możemy go wykorzystać w wielu miejscach. Poprzez generowanie warstw w ten sposób uzyskujemy znakomity sposób na zastąpienie statycznych cyfr w kodzie CSS zmiennymi i rozpoczęcie zabawy w prawdziwie dynamicznie generowane strony DHTML.
Przykład:
var x = 20+15/5
var y = 100+50/5
writeCSS(
css('mylayer',x,y)
)
W następnych lekcjach będziemy często z tego korzystać.
Generowanie wielu warstw:
Poprzez wykorzystanie pętli, możemy użyć techniki generowania warstw do utworzenia dowolnej ilości warstw w dowolny sposób. Możemy utworzyć setki warstw w dowolnych, losowych pozycjach, lub utworzyć siatkę z warstw. Następne przykłady pokazują parę ciekawych możliwości. Są dość proste, więc jestem pewien, że bez problemu je zrozumiesz.
generate3-multiple.html tworzy siatkę niebieskich prostokątów - Zobacz źródło
Powracające bloki - przykład podobny do poprzedniego, ale korzystając z DynLayer dodałem trochę więcej funkcjonalności - Zobacz kod źródłowy
Strona główna
Następna lekcja:
Szerokość / Wysokość przeglądarki
copyright 1998 Dan Steinman
Wyszukiwarka
Podobne podstrony:
Językoznawstwo ogólne generatywizm 2faq generalL Enthalpy general S09Die 3 Generation Halts MaulgeneratorŚrodowa Audiencja Generalna Radio Maryja, 2011 03 09general training example writing 6 10GeneralEThird generation EUCLIDES concentrator resultsmini generator szumuGeneralWTukanas Hits Generator Portable N2KMaster LicenseUkłady pracy generatorów stosowanych w elektrowniach wiatrowychwięcej podobnych podstron