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;
}
#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>
<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);
 
        });
    });
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;
}
#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>
<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.

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

Záver

Komentáre

Pridať komentár