Programujeme DHTML aplikace – efekty CSS

Jak pracovat se vzhledem a vlastnostmi elementů či složitějších objektů a jak využít CSS a CSS-P v aplikacích DHTML?

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:

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.

<a id=“odkaz3″ style=“position:relative;“ href=“Javascript: void(document.getElementById(‚odkaz3′).style.top=’10px‘)“>odkaz</a>

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

<body onScroll=“Javascript: if(!NS) obnov_pozici();“>
…
…
 function obnov_pozici()
 {document.getElementById(‚menu‘).style.top = document.body.scrollTop;}
…
…
</body>

Tip:

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:

1

2

3

4

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.

var objekt;
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

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.