<p id='prepend'>V tomto Φlßnku se podφvßme na poslednφ Φty°i novΘ p°echody z dφlny Microsoftu. Pomocφ p°echodu Stretch hrav∞ dosßhneme efektu rotujφcφ krychle, mßme tu takΘ p°echod Strips, kter² se podobß p°echodu Inset, nebo zajφmav² p°echod Wheel, p°ipomφnajφcφ roztoΦenΘ kolo povozu. A na zßv∞r p°echod Zigzag, jak ji₧ nßzev napovφdß, odkr²vajφcφ nov² obsah sem a tam.</p>
<p>VÜechny tyto p°echody, jak jsem ji₧ zd∙raz≥oval d°φve, jsou v souΦasnΘ dob∞ bez problΘm∙ pou₧itelnΘ v prohlφ₧eΦφch MSIE 5.5 a vyÜÜφch. Nejsou ale souΦßstφ ₧ßdn²ch standard∙ a pravd∞podobn∞ se tomu tak ani nestane, nebo¥ se jednß v²luΦn∞ o syntaxi Microsoftu.</p>
<h3>P°echod Stretch</h3>
<p>Nov² obsah prvku zobrazφ rozta₧n²m pohybem p°ekr²vajφcφm p∙vodnφ obsah. Jeden styl p°ipomφnß krychli rotujφcφ podle st°edovΘ osy. TakΘ pat°φ mezi novΘ p°echody p°edtφm nikde nezahrnutΘ.</p>
<tr><td>Percent</td><td>Nastavφ bod, ve kter²m se p°echod zastavφ a dosßhne tφm efektu statickΘho filtru. M∙₧e nab²vat hodnot 0 (implicitnφ) a₧ 100.</td></tr>
<tr><td>Status</td><td>Uchovßvß aktußlnφ stav p°echodu. M∙₧e nab²vat hodnot 0 - p°echod stojφ, 1 - p°echod je aplikovßn, 2 - p°echod probφhß.</td></tr>
<tr><td>StretchStyle</td><td>UrΦuje metodu pou₧itou pro p°echod. M∙₧e nab²vat hodnot hide (implicitnφ), push a spin.</td></tr>
</table>
</div>
<p>K p°echodu <a href='podklady/fiserdominik/613/stretch.htm'>Stretch</a> jsem si zde p°ipravil p°φklad s barevnou plochou p°echßzejφcφ v obrßzek, a to za pou₧itφ zm∞ny vlastnosti visibility p°echodn²ch prvk∙. P°echod Stretch si m∙₧ete stejn∞ jako ostatnφ p°echody vyzkouÜet p°φmo na testovacφ strßnce <a href='http://msdn.microsoft.com/workshop/samples/author/filter/Stretch.htm'>MSDN Microsoft</a>.</p>
<p>Zdrojov² k≤d ovlßdacφho skriptu:</p>
<div class='sample'>
<script>
<br /> <!--
<br /> var stav = 0;
<br /> function str() {
<br /> kontejner_str.filters[0].Apply();
<br /> if (stav==0) {
<br /> stav = 1;
<br /> obr2_str.style.visibility="visible";
<br /> obr1_str.style.visibility="hidden";}
<br /> else {
<br /> stav = 0;
<br /> obr2_str.style.visibility="hidden";
<br /> obr1_str.style.visibility="visible";}
<br /> kontejner_str.filters[0].Play();}
<br /> -->
<br /></script>
</div>
<p>V ovlßdacφm skriptu nejprve nadefinujeme prom∞nnou <samp>stav</samp> a potΘ funkci <samp>str()</samp>, kterß aplikuje dan² p°echod pomocφ metody <samp>apply()</samp>. Prom∞nnß <samp>stav</samp> zajiÜ¥uje za pomoci podmφnek pravidelnΘ st°φdßnφ barevnΘ plochy a obrßzku. Dßle jsou ve funkci str() definovßny atributem style koneΦnΘ hodnoty vlastnostφ <samp>visibility</samp> prvk∙ <samp>obr1_str</samp> a <samp>obr2_str</samp>, kterΘ jsou nastaveny v zßvislosti na hodnot∞ prom∞nnΘ stav. Nakonec funkce zavolß spouÜt∞cφ metodu <samp>play()</samp> danΘho p°echodu.</p>
<p>Dßle jsou tu p°echodnΘ prvky <samp>obr1_str</samp> a <samp>obr2_str</samp> vno°enΘ do prvku <samp>kontejner_str</samp>, ve kterΘm je pomocφ atributu style a vlastnosti <samp>filter</samp> definovßn p°echod Stretch i se sv²m parametrem duration=10 (doba trvßnφ 10s). U druhΘho p°echodnΘho prvku musφme na zaΦßtku nastavit vlastnost <samp>visibility</samp> na hodnotu <samp>hidden</samp>, jinak by byl zobrazen jeÜt∞ p°ed spuÜt∞nφm p°echodu. StejnΘho efektu se dß jednoduÜeji dosßhnout i pou₧itφm absolutnφho polohovßnφ obou prvk∙ nad sebe. TlaΦφtko "Spustit p°echod Stretch" po kliknutφ jen volß definovanou funkci <samp>str()</samp>. U prvk∙ div a span nesmφme zapomenout na nastavenφ atribut∙ width nebo height.</p>
<h3>P°echod Strips</h3>
<p>Zobrazφ nov² obsah prvku pohybem odkr²vajφcφho zubatΘho pruhu po diagonßle, p°ipomφnß zubatou pilku pohybujφcφ se po diagonßle. Podobn² p°echodu Inset. Nahrazuje p°echody 17 a₧ 20 starÜφho p°echodu RevealTrans.</p>
<tr><td>Motion</td><td>Nastavuje roh prvku ze kterΘho se nov² obsah prvku zaΦne odkr²vat. M∙₧e nab²vat hodnot leftdown - z hornφho pravΘho rohu (implicitnφ), leftup - z dolnφho pravΘho rohu, rightdown - z levΘho hornφho rohu, rightup - z levΘho dolnφho rohu.</td></tr>
<tr><td>Percent</td><td>Nastavφ bod, ve kter²m se p°echod zastavφ a dosßhne tφm efektu statickΘho filtru. M∙₧e nab²vat hodnot 0 (implicitnφ) a₧ 100.</td></tr>
<tr><td>Status</td><td>Uchovßvß aktußlnφ stav p°echodu. M∙₧e nab²vat hodnot 0 - p°echod stojφ, 1 - p°echod je aplikovßn, 2 - p°echod probφhß.</td></tr>
</table>
</div>
<p>Na demonstraci mo₧nostφ p°echodu <a href='podklady/fiserdominik/613/strips.htm'>Strips</a> jsem pou₧il p°φklad p°echodu dvou obrßzk∙ pomocφ zm∞ny atributu src p°echodnΘho prvku. P°echod Strips si m∙₧ete takΘ vyzkouÜet p°φmo na testovacφ strßnce <a href='http://msdn.microsoft.com/workshop/samples/author/filter/Strips.htm'>MSDN Microsoft</a>.</p>
<p>Zdrojov² k≤d ovlßdacφho skriptu:</p>
<div class='sample'>
<script>
<br /> <!--
<br /> var stav = 0;
<br /> function strips() {
<br /> obr_strips.filters[0].Apply();
<br /> if (stav==0) {
<br /> stav = 1;
<br /> obr_strips.src="prechod3.gif";}
<br /> else {
<br /> stav = 0;
<br /> obr_strips.src="prechod1.gif";}
<br /> obr_strips.filters[0].Play();}
<br /> -->
<br /></script>
</div>
<p>V ovlßdacφm skriptu nejprve definujeme funkci <samp>strips()</samp>, kterß aplikuje dan² p°echod pomocφ metody <samp>apply()</samp>. Definovanß prom∞nnß <samp>stav</samp> zajiÜ¥uje za pomoci podmφnek pravidelnΘ st°φdßnφ obrßzk∙. Dßle je ve funkci strips() definovßna koneΦnß hodnota atributu <samp>src</samp> obrßzku <samp>obr_strips</samp>, kterß je urΦena prßv∞ v zßvislosti na hodnot∞ prom∞nnΘ stav. Nakonec ji₧ funkce volß metodu <samp>play()</samp> danΘho p°echodu.</p>
<p>P°echod Strips spolu s parametry duration=0.4 (doba trvßnφ 400ms) a motion=rightup (z levΘho dolnφho rohu) je definovßn v atributu <samp>style</samp> p°echodnΘho obrßzku <samp>obr_strips</samp> vlastnostφ <samp>filter</samp>. Dßle je zde ji₧ pouze tlaΦφtko "Spustit p°echod Strips", kterΘ po kliknutφ volß funkci <samp>strips()</samp> definovanou v ovlßdacφm skriptu.</p>
<h3>P°echod Wheel</h3>
<p>Zobrazφ nov² obsah prvku postupn²m odkr²vßnφm paprsku rotujφcφho kolem st°edu. P°ipomφnß rotujφcφ kolo povozu. TakΘ tento p°echod pat°φ mezi novΘ p°edtφm nikam nezahrnutΘ filtry.</p>
<tr><td>Percent</td><td>Nastavφ bod, ve kter²m se p°echod zastavφ a dosßhne tφm efektu statickΘho filtru. M∙₧e nab²vat hodnot 0 (implicitnφ) a₧ 100.</td></tr>
<tr><td>Spokes</td><td>UrΦuje poΦet klφn∙, do kter²ch se obsah prvku rozd∞lφ. M∙₧e nab²vat hodnot 2 a₧ 20, implicitn∞ 4.</td></tr>
<tr><td>Status</td><td>Uchovßvß aktußlnφ stav p°echodu. M∙₧e nab²vat hodnot 0 - p°echod stojφ, 1 - p°echod je aplikovßn, 2 - p°echod probφhß.</td></tr>
</table>
</div>
<p>U p°echodu <a href='podklady/fiserdominik/613/wheel.htm'>Wheel</a> bych vßm rßd na p°φklad∞ p°edvedl takΘ mo₧nost pravidelnΘho opakovßnφ, kterΘ je zde zajiÜt∞nou pomocφ funkce SetTimeout. V pravideln²ch intervalech zde budou pomocφ vlastnosti InnerHTML p°echßzet obrßzek a text. P°echod Wheel zase trochu jinak si m∙₧ete vyzkouÜet takΘ p°φmo na testovacφ strßnce <a href='http://msdn.microsoft.com/workshop/samples/author/filter/Wheel.htm'>MSDN Microsoft</a>.</p>
<p>V ovlßdacφm skriptu je nejprve definovßna funkce <samp>wheel()</samp>, kterß aplikuje dan² p°echod pomocφ metody <samp>apply()</samp>. Definovanß prom∞nnß <samp>stav</samp> pak zajiÜ¥uje za pomoci podmφnky pravidelnΘ st°φdßnφ obrßzku a textu. Pomocφ vlastnosti <samp>InnerHTML</samp>, kterß m∞nφ obsah prvku vΦetn∞ element∙ jazyka HTML, ve funkci wheel() nadefinujeme koneΦnΘ obsahy prvku <samp>obr_wheel</samp>. Potom ji₧ funkce wheel() zavolß metodu <samp>play()</samp> danΘho p°echodu. Aby se cel² p°echod pravideln∞ opakoval, je do skriptu p°idßna navφc prom∞nnß <samp>cas</samp>, kterß pomocφ p°eddefinovanΘ funkce <samp>SetTimeout()</samp> nastavuje volßnφ funkce check() na 5000 milisekund. A vzhledem k tomu, ₧e je tato funkce volßna na konci ka₧dΘho prob∞hnutφ funkce wheel(), opakuje se spouÜt∞nφ p°echodu pravideln∞ ka₧d²ch 5000 milisekund.</p>
<p>Samotn² p°echod Wheel je potom spolu se sv²mi dv∞ma parametry duration=5 (doba trvßnφ 5s) a spokes=7 (7 klφn∙) definovßn v atributu <samp>style</samp> prvku <samp>obr_wheel</samp> vlastnostφ <samp>filter</samp>. SpuÜt∞nφ ovlßdacφ funkce <samp>wheel()</samp> zajiÜ¥uje atribut <samp>onload</samp> vno°enΘho prvku, kter² funkci wheel() zavolß po naΦtenφ. V atributu style prvku obr_wheel jsou potom jeÜt∞ pomocφ vlastnostφ jazyka CSS nastaveny parametry pφsma zobrazovanΘho textu. U prvku obr_wheel musφ b²t v atributu style nastaveny povinnΘ atributy (vlastnosti) pro prvky div a span, a to width nebo height.</p>
<h3>P°echod Zigzag</h3>
<p>Nov² obsah prvku zobrazφ pohybem tam a zp∞t postupn∞ shoda dol∙. Poslednφ z nov²ch p°echod∙, kterΘ d°φve nebyly nikam zahrnuty.</p>
<br /> txt_zig.innerHTML="<br>Vφte na jak² p°echod se prßv∞ dφvßte?";}
<br /> txt_zig.filters[0].Play();
<br /> -->
<br /></script>
</div>
<p>V ovlßdacφm skriptu nap°ed nadefinujeme funkci <samp>zig()</samp>, kterß aplikuje dan² p°echod pomocφ metody <samp>apply()</samp>. Definovanß prom∞nnß <samp>stav</samp> pak zajiÜ¥uje za pomoci podmφnky pravidelnΘ st°φdßnφ prvnφho a druhΘho textu. Dßle jsou ve funkci zig() pomocφ vlastnosti <samp>InnerHTML</samp>, kterß m∞nφ obsah prvku vΦetn∞ element∙ jazyka HTML, nadefinovßny koneΦnΘ obsahy prvku <samp>txt_zig</samp>. Dßle u₧ funkce jen zavolß metodu <samp>play()</samp> danΘho p°echodu.</p>
<p>P°echod Zigzag jako takov² je potom vΦetn∞ sv²ch parametr∙ duration=2 (doba trvßnφ 2s), gridsizex=40 (40 sloupc∙ m°φ₧ky) a gridsizey=40 (40 °ßdk∙ m°φ₧ky) definovßn v atributu <samp>style</samp> prvku <samp>txt_zig</samp> vlastnostφ <samp>filter</samp>. V atributu style prvku txt_zig je pak jeÜt∞ pomocφ vlastnostφ jazyka CSS nastaveno formßtovßnφ pφsma textu. P°echod se spouÜtφ kliknutφm na tlaΦφtko "Spustit p°echod Zigzag", kterΘ volß p°edem definovanou funkci <samp>zig()</samp>. U prvku txt_zig musφ b²t v atributu style nastaveny povinnΘ vlastnosti pro prvky div a span, tedy width nebo height!</p>
<p>A tφmto p°echodem jsem ji₧ zakonΦil p°ehled vÜech sedmnßcti nov²ch p°echod∙ z dφlny Microsoftu.</p>
<li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2856'>ZnakovΘ sady v praxi</a></li>
<li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2849'>Vytvß°enφ dokument∙ PDF v PHP</a></li>
<li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2852'>Interval v zajetφ Φφsel</a></li>
<li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2850'>CSS2 - podpora kaskßdov²ch styl∙ v sedmiΦkovΘ °ad∞ Opery</a></li>
<li><a href='http://interval.cz/redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2844'>P.E.T. - jednoduch² Üablonovacφ systΘm v PHP</a></li>
