C# - clockWipe, ellipseWipe és fade TransitionFilter-ek

HTML+TIME lehetőségei a Web-alkalmazásokban 7. rész

forráskód letöltése
A sorozat ezt megelőző számában elkezdtünk foglalkozni a transitionFilter elem használatával, ebben a számban is ezt folytatjuk, ígéretünkhöz híven. Az elem segítségével tovább fokozhatjuk a weblap mozgékonyságát, hiszen a legváltozatosabb formákban tudjuk kirajzolni a transitionFilter számára megadott kontrolokat. A cikkhez mellékelt alkalmazásban kétféle transitionFilter elem számára adjuk meg ugyanazt a kontrolt.
A mellékelt példa megnyitása előtt szükséges egy HTMLPlusTIME07 nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez futtassa le a mellékelt CreateVD.js parancsállományt.
A művelet bemutatása előtt elevenítsük fel azt a néhány attribútumot, melyeket a sikeres műveletvégzés érdekében mindenképpen meg kell adnunk.
Attribútum Jellemző
BEGIN Azt kell megadnunk az attribútumban, hogy a folyamat a lap betöltődése után hány másodperces késéssel induljon el. Itt megadhatunk egy egész számot is, de jelezhetjük a kezdés pontos idejét is a hh:mm:ss formátumban megadott időinformációval.
DUR Megadható a művelet végrehajtásának időtartama.
MODE Meghatározható, hogy a művelet eredményeképpen a módosított tulajdonságú objektum láthatósága nő vagy csökken. Értékei ennek megfelelően IN vagy OUT lehetnek.
TYPE A transitionFilter típusa adható meg.
A DIV kontrol belsejében adjuk meg a viselkedést „rákényszerítő” transitionFilter elem deklarációját. Annak érdekében, hogy a kontrol megjelenése látványos legyen, létrehoztunk egy stílusosztályt, melyben egy FILTER segítségével adjuk meg, hogy a kontrol milyen kitöltő színnel jelenjen meg.
.dsgn { BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; FONT-WEIGHT: bold; FONT-SIZE: 24px; FILTER: progid:DXImageTransform.Microsoft.Gradient(); BORDER-LEFT: black 2px solid; WIDTH: 250px; COLOR: white; BORDER-BOTTOM: black 2px solid; FONT-FAMILY: trebuceht; HEIGHT: 250px; TEXT-ALIGN: center }
A másik kontrolban hivatkozott stílusosztály a .timer, melynek segítségével a kontrol viselkedése időzíthető.
.time { BEHAVIOR: url(#default#time2) }
Ezeket a DIV CLASS attribútumában csak felsoroljuk.
<DIV CLASS="time dsgn" ...
Az alkalmazás WebForm1.aspx lapján az óramutató járásának megfelelően egyre nagyobb szeleteket jelenítünk meg a téglalapból. A művelet 3 másodperc alatt megtörténik.
<t:TRANSITIONFILTER DUR="3" TYPE="clockWipe" BEGIN="oDiv.begin"></t:TRANSITIONFILTER>
Ezt a megjelenítést a transitionFilter elem TYPE attribútumában megadott „clockWipe” karakterláncnak köszönhetjük.
A művelet végén – néhány másodperces késéssel – a DIV kontrol színe folyamatosan áttetszővé válik, majd a kontrol eltűnik. Ennek érdekében egy újabb transitonFilter elemet kell deklarálnunk, csak a TYPE attribútumban kell a „fade” karakterláncot megadni, valamint a MODE attribútumot „out” értékre beállítani.
<t:TRANSITIONFILTER DUR="3" TYPE="fade" BEGIN="oDiv.end-3" MODE="out"></t:TRANSITIONFILTER>
A WebForm2.aspx lapon egy folyamatosan egyre nagyobb területet kitöltő ellipszisként jelenik meg a specifikált DIV kontrol. Ehhez a transitionFilter elem TYPE attribútumát kell „ellipseWipe”-ra választani.

HTML+TIME lehetőségei a Web-alkalmazásokban cikksorozat

clockWipe, ellipseWipe és fade TransitionFilter-ek - HTML+TIME lehetőségei a Web-alkalmazásokban 7. rész