×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Informačný web Mateja Lednára
Vytvárame riešenia

Ako správne na metódy wipeOut() a wipeIn() vo frameworku Dojo Toolkit

Pri práci s efektmi a metódami wipeOut() a wipeIn() môže programátor naraziť na problém s resetovaním definovanej výšky kontajnera. Výsledkom je, že metóda wipeIn() nevráti element, na ktorý bola aplikovaná metóda wipeOut() do pôvodnej výšky. Tomuto nežiaducemu javu je možné zabrániť nasledujúcim spôsobom.
Skôr ako bude predstavené riešenie, bude demonštrované nežiaduce správanie.
Príklad: Zápis do elementu <style>.
1
2
3
4
5
6
7
#effects {
background-color : #f0f0f0;
border : 2px solid #e0e0e0;
width : 300px;
height : 200px;
text-align : center;
}
Príklad: Zápis do elementu <body>.
1
2
3
4
<button id="wipeOut">Wipe block out</button>
<button id="wipeIn">Wipe block in</button>
<div id="effects">Effects</div>
Príklad: Zápis do elementu <script>.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
require(["dojo/ready", "dojo/on", "dojo/fx", "dojo/dom"],
function(ready, on, fx, dom) {
ready(function() {
function wipeOut() {
var args = {
node: "effects",
duration: 500
};
var animation = fx.wipeOut(args);
animation.play();
}
function wipeIn() {
var args = {
node: "effects",
duration: 500
};
var animation = fx.wipeIn(args);
animation.play();
}
var wipeOutButton = dom.byId("wipeOut");
var wipeInButton = dom.byId("wipeIn");
on(wipeOutButton, "click", wipeOut);
on(wipeInButton, "click", wipeIn);
});
});
Pre odstránenie nežiaduceho javu stačí vykonať len dve zmeny. Element, na ktorý má byť efekt aplikovaný, vložíme do kontajnera. Výšku neaplikujeme na kontajner, ale na pôvodný element. Výsledkom programových zmien bude úprava selektora, nie vlastností v jazyku CSS a pridanie wrappera elementu <div> v jazyku HTML pričom bude naň aplikovaný aj pôvodný atribút id. V jazyku JavaScript nie je potrebné vykonať žiadne zmeny.
Príklad: Úprava selektora v jazyku CSS bez zmien pôvodných vlastností.
1
2
3
4
5
6
7
#effects div {
background-color : #f0f0f0;
border : 2px solid #e0e0e0;
width : 300px;
height : 200px;
text-align : center;
}
Príklad: Pridanie wrappera pre element <div> a presunutie atribútu id do wrappera.
1
2
3
4
<button id="wipeOut">Wipe block out</button>
<button id="wipeIn">Wipe block in</button>
<div id="effects"><div>Effects</div></div>

Záver

Teraz je už efekt vykonaný správne. Ak poznáte iné zaujímavé riešenie uvedeného problému, podeľte sa oň prostredníctvom komentára.
Dojo,programovanie,dojo/ready,dojo/on,dojo/fx,dojo/dom,wipeIn,wipeOut
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších