 |
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Jeliko₧ je toto tΘma spφÜe aplikaΦnφ a mnozφ ji₧ n∞jakΘ ty zßkladnφ zkuÜenosti s CSS mßte, spφÜe ne₧ textu budu v∞novat pozornost k≤du a ka₧d² prvek bude nßle₧it∞ ilustrovßn. Samoz°ejm∞ v zßsad∞ neobjevujeme Ameriku a n∞kterΘ typickΘ ·lohy jsou ΦßsteΦn∞ °eÜeny bu∩ p°φmo na Intervalu nebo na ostatnφch webov²ch mφstech. Proto budou souΦßstφ i odkazy na podobn∞ °eÜenΘ Φi odvozenΘ ekvivalenty. P°esto v∞°φm, ₧e toto malΘ shrnutφ nejvyu₧φvan∞jÜφch rutin nebude na Ükodu.
Poj∩me rovnou k prvnφmu zßchytnΘmu bodu, kter²m je atribut style, respektive objektov² model stylov²ch Üablon. Ty pat°φ mezi d∙le₧itΘ vlastnosti element∙, nebo¥ jsou prost°ednφky mezi elementy dokumentu a kaskadov²mi styly, disponujφcφ Üirok²m spektrem formßtovacφch vlastnostφ. Syntaxe vytvo°enφ nebo zm∞ny zßpisu CSS prvku skrze inline atribut je vyΦerpan∞ popsßna ji₧ v Φlßnku DynamickΘ zm∞ny vzhledu strßnky pomocφ CSS a JavaScriptu. SouΦßstφ Φlßnku je takΘ p°ehled d∙le₧it²ch vlastnostφ, vΦetn∞ jejich javascriptov²ch nßzv∙. Druhou mo₧nostφ, chceme-li zasahovat do p°edzßpis∙ (nap°. p°i zm∞n∞ barvy pozadφ vÜech tabulek), je pracovat p°φmo skrze zmi≥ovan² objektov² model. I zde ji₧ nebudu nosit d°φvφ do lesa, nebo¥ se jφm ΦßsteΦn∞ zaobφral kolega Morkes v textu Slabikß° JavaScriptu - prßce s vklßdan²mi styly. Jenom podot²kßm, ₧e rozhranφ styl∙ je souΦßstφ specifikace W3C DOM LEVEL2. Vzhledem k v∞tÜφ rozsßhlosti p°esahujφcφ rßmec toho textu uvßdφm pouze nejpou₧φvan∞jÜφ Φßsti CSSStyleSheet, CSSRuleList, CSSRule a CSSSStyleRule. Bohu₧el IE jde v tomto sm∞ru stßle svou cestou, proto jsou souΦßstφ p°φpadnΘ IE prot∞jÜky, kompletnφ IE referenci najdete v knihovn∞ MSDN.
P°esto se jeÜt∞ ke zm∞n∞ Üablon musφm vrßtit, neb bych rßd napravil omyl autora v tom, ₧e Üablony nejsou p°episovatelnΘ a zm∞na je mo₧nß pouze smazßnφm a op∞tovn²m vytvo°enφm pravidla. Rozhranφ CSSSStyleRule obsahuje atribut style, kter² je sice readonly, ale typu CSSStyleDescription, stejn∞ jako jeho inline p°φbuzn². S pravidly lze tedy naklßdat identicky jako s inline atributem style, Φili syntaxφ document.styleSheets[x].rules[x].style pro IE a document.styleSheets[x].cssRules[x].style pro Mozilla/Netscape. Malß demonstrace zm∞ny barvy vÜech odkaz∙.
Tip:
| V₧dy pracujte se styly na tΘ ·rovnφ kde jsou definovßny. Pokud je tedy styl nastaven pomocφ p°edzßpisu, modifikujte p°es objektov² model styl∙. Pokud je definovßn inline, pou₧ijete atributu style danΘho elementu. Vyvarujete se tak skryt²m chybßm v k≤du, nebo¥ hodnoty nastavenΘ v p°edzßpise se v atributu style neprojevujφ (a naopak). |
Rozm∞ry a pozice element∙
èφ°ka a v²Üka elementu se nastavuje skrze CSS vlastnosti width (Üφ°ka) a height (v²Üka), nejΦast∞ji v jednotkßch px (pixel). Primßrn∞ se p°itom nerozliÜuje, o jak² typ elementu se jednß. Zcela zßkladnφ demonstraci p°edchozφch slov m∙₧ete shlΘdnout v dokumentu rozmery.htm.
UrΦovßnφ pozice element∙ je jednou z velmi vyu₧φvan²ch vlastnostφ CSS a ve spojenφ s DHTML umo₧≥uje velmi rozsßhlΘ spektrum efekt∙. Nejprve si ale p°ipome≥me jakΘ typy pozice existujφ, tedy jakΘ hodnoty m∙₧e CSS vlastnost position vlastn∞ nab²vat.
- static je v²chozφ hodnotou a prvek s touto valuacφ je umφst∞n normßln∞, dle struktury HTML zßpisu. Nastavenφm tΘto hodnoty je ale znemo₧n∞na p°φpadnß zm∞na umφst∞nφ elementu
- relative je hodnotou, kterß udßvß relativnφ umφst∞nφ vzhledem k pozici nad°azenΘho (kontejnerovΘho) elementu. Napohled je prvek s touto valuacφ umφst∞n jako static, pozd∞ji lze ale jeho pozici m∞nit relativn∞ vzhledem k jeho p∙vodnφ poloze
- absolute je vlastn∞ typ relative vzhledem k pozici kontejneru body, co₧ je vlastn∞ hornφ lev² roh okna prohlφ₧eΦe. Pokud je ovÜem element vno°en v jinΘm absolutn∞ umφst∞nΘm prvku, je pozice brßna relativn∞ k jeho pozici.
- fixed je specißlnφ typ pozice, kterß je ve svΘ podstat∞ absolutnφ v∙Φi zobrazovaΦi (prohlφ₧eΦ) a tudφ₧ je imunnφ v∙Φi "scrollovßnφ"
SamotnΘ sou°adnice p°i°adφme elementu p°es vlastnosti left, top, co₧ jsou vzßlenosti od levΘho a hornφho okraje kontejnerovΘho elementu. Demonstrovßnφ static nemß valnΘho smyslu, nebo¥ to je v²chozφ hodnota, kterou mß implicitn∞ nastavenu ka₧d² element na tΘto strßnce. Pro ukßzku relative nßm poslou₧φ ji₧ znßm² "magick²" odkaz, tentokrßt upraven tak, aby se po kliknutφ posunul o 10 pixel∙ nφ₧e. Jeliko₧ je jeho souΦasnß pozice na sou°adnicφch (0,0), zm∞nou sou°adnice y na 10 px zφskßme k²₧en² efekt.
Pro pochopenφ absolutnφch pozic pou₧iji p°φklad, kter²m jsem se nechal inspirovat na serveru SiteExpert.com. Nejde o nic slo₧itΘho a struΦn∞ °eΦeno se jednß o u₧ivatelskΘ vytvo°enφ vlastnφho ekvivalentu metody alert (p°φpadn∞ podobn²ch), s p°idßnφm zajφmavΘho efektu ztmavenφ pozadφ, znßmΘho z Windows. Knihovna je k dispozici na alert.js a nabφzφm i jejφ ukßzku. Principem je dynamickΘ vytvo°enφ dvou element∙ (pozadφ a hlßÜka) s absolutnφ pozicφ. Po zφskßnφ rozm∞rov²ch parametr∙ prohlφ₧eΦe pomocφ funkcφ uveden²ch nφ₧e na obrßzcφch se pak nastavφ p°φsluÜnΘ pozice (sou°adnice [0,0] pro pozadφ a vycentrovßnφ pro hlßÜku) a velikosti objekt∙ (roztßhnutφ pozadφ p°es Üφ°ku a v²Üku prohlφ₧eΦe).
Metody pro zjiÜt∞nφ rozm∞r∙ prohlφ₧eΦe a dokumentu u Internet Explorer
Metody pro zjiÜt∞nφ rozm∞r∙ prohlφ₧eΦe a dokumentu u Mozilla/NS
* - k dispozici u nov∞jÜφch verzφ
Standard CSS2, znß takΘ typ fixed, co₧ je pevnß pozice nikoliv vzhledem k dokumentu, n²br₧ k zobrazovaΦi û prohlφ₧eΦi. V praxi to vypadß tak, ₧e i kdy₧ je strßnka rolovßna, element si udr₧uje v²chozφ stav. Toto ohodnocenφ podporuje Mozilla, nikoli Internet Explorer. Proto je t°eba vytvo°it nßhradu. Jako ilustraci jsem zvolil persistentnφ navigaΦnφ prvek. U mozilly je postup velmi snadn², postaΦφ nastavit sou°adnice, p°φsluÜn² typ fixed a o zbytek se postarß prohlφ₧eΦ. U IE musφme chovßnφ simulovat funkcφ, kterß po vyvolßnφ udßlosti "onScroll" posune objekt o poΦet rolovan²ch pixel∙.
à
à
function obnov_pozici()
{document.getElementById('menu').style.top = document.body.scrollTop;}
à
à
</body>
Tip:
| P°i nastavovßnφ pozice, Φi rozm∞r∙ elementu nezapome≥te uvΘst i jednotky. N∞kterΘ starÜφ verze prohlφ₧eΦ∙ Mozilla a Netscape hodnoty bez jednotek neinterpretujφ. |
Viditelnost
DalÜφm mocn²m prost°edkem, kter²m CSS disponuje je nastavenφ viditelnosti, typu zobrazenφ a hloubky elementu. Nejprve k viditelnosti, tedy atributu visibility. Ta m∙₧e nab²vat valuacφ visible (viditeln²) nebo hidden (skryt²). Zobrazenß HTML struktura ale z∙stßvß nezm∞n∞na. Narozdφl od display, kterß urΦuje, jak se prvek vykreslφ vzhledem k hierarchii dokumentu. Nab²vat m∙₧e hodnot inline, block, nebo none. Hloubka elementu, kterß se projevφ p°i vykreslenφ element∙ je₧ se navzßjem p°ekr²vajφ, se urΦuje p°es atribut z-index. ╚φm vyÜÜφ Φφslo z-index nese, tφm v²Üe je element vykreslen. Podmφnkou pro jeho aktivaci je nastavenφ pozice typu relative nebo absolute. V urΦenφ rozdφlu mezi visibility:hidden a display:none, kterΘ svßd∞jφ k ekvivalenci, a jak pou₧φt z-index vßm pomohou nßsledujφcφ tlaΦφtka:
P°φkladem pokroΦilΘ DHTML a aplikace viditelnostφ je zde ji₧ probφran² skript na vytvo°enφ stromovΘ hierarchie prvk∙, kterΘ se dle pot°eby otevφrajφ a zavφrajφ. Kdy₧ jsem na poΦßtku hovo°il, ₧e ka₧d² problΘm lze pojmout i zcela odliÜn∞, °eÜenφ Φφslo dv∞ pojatΘ jako formßtovßnφ struktur UL a LI nabφzφm v dokumentu tree.htm. Jeho podobnou verzi lze shlΘdnout i na http://js.fczbkk.sk/tree/. Te∩, kdy₧ ji₧ znßme viditelnost, lze upravit "alert" skript i tak, aby se hlßÜka pouze zobrazovala a skr²vala, nikoli opakovan∞ vytvß°ela a odstra≥ovala.
Animace
Od elementßrnφho urΦovßnφ pozice objektu je ji₧ kr∙Φek k rozmanit²m animaΦnφm technikßm, kterΘ lze z°et∞zenφm zm∞ny pozice programovat. Pravd∞podobn∞ by pro vßs nem∞l b²t problΘm napsat alespo≥ jednoduchou animaΦnφ proceduru p°esunu objektu z jednoho mφsta na druh². Jak by takovß opravdu zßkladnφ funkce mohla vypadat, m∙₧ete vid∞t nφ₧e nebo v p°φkladu. Jenom dodßvßm, ₧e principem je nejprve vypoΦφtßnφ jednotliv²ch krok∙ jak po sou°adnici x, tak y, a nßslednΘm cyklickΘm volßnφ funkce krok(), kterß manußln∞ provede p°esun. Na stejn²ch principech je zalo₧en i reklamnφ prvek "lΘtajφcφ Φestmφr". A ₧e lze provßd∞t opravdu velmi zajφmavΘ kousky i pomocφ pokroΦil²ch grafick²ch metod (nap°. bezierovy k°ivky apod.), se m∙₧ete p°esv∞dΦit na serverech 13thparallel nebo na Assembler.
function presun(id,x,y)
{
objekt = document.getElementById(id);
objekt.snimky = 50;
objekt.realx = parseInt(objekt.style.left);
objekt.realy = parseInt(objekt.style.top);
objekt.dx = (x-objekt.realx) / objekt.snimky ;
objekt.dy = (y-objekt.realy) / objekt.snimky ;
presun = setInterval('krok();',20);
}
function krok()
{
objekt.realx += objekt.dx;
objekt.realy += objekt.dy;
objekt.style.left = parseInt(objekt.realx) + "px";
objekt.style.top = parseInt(objekt.realy) + "px";
--objekt.snimky;
if(objekt.snimky==0) clearInterval(presun);
}
VÜechny soubory pou₧itΘ v tomto dφle si mu₧ete najednou stßhnout v souboru dhtml4.zip
P°edchozφ Φlßnky:
Programujeme DHTML aplikace û obsah
Programujeme DHTML aplikace û dokument
RozluÜt∞nΘ k°i₧ovatky DHTML