×
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.
Vytvárame riešenia

Ako otvoriť a zatvoriť dijit/TitlePane

Aj napriek tomu, že framework Dojo toolkit má nový dizajn stránok, stále veľa vecí nie je zdokumentovaných. Medzi takéto patrí aj otváranie a zatváranie widgetu dijit/TitlePane. V dokumentácii je uvedená len vlastnosť open, ktorá definuje stav widgetu po renderovaní. Žiaľ ako widget ovládať programaticky už nie je zdokumentované. Z tohto dôvodu som vytvoril príklad, ktorý demonštruje tri spôsoby manipulácie s widgetom dijit/TitlePane.
Prvý spôsob je použitie metódy set(). Tá žiaľ priamo neaplikuje animácie. Druhý spôsob je volanie privátnej metódy _setOpenAttr(), ktorá už animácie zohľadňuje. Tretí spôsob je opäť použitie metódy set(), tentokrát aj s parametrom pre animácie. Na tomto príklade som aplikoval prvý krát použitie metódy set() s troma argumentmi. S touto špecialitku som sa stretol už v minulosti, kde podľa dokumentácie mal byť daný zápis podporovaný, no opak bol pravdou.
Príklad: Deklaratívny zápis dijit/TitlePane.
1
2
3
4
5
6
7
<div id="tp" data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Title', open:false">
Content
</div>
<div id="buttonsPlace1"></div>
<div id="buttonsPlace2"></div>
<div id="buttonsPlace3"></div>
Príklad: Vytvorenie buttonov a rôzne spôsoby expand() a collapse().
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
require(["dojo/ready", "dijit/form/Button", "dijit/registry"],
function (ready, Button, registry) {
ready(function () {
new Button({
label: "Expand fast",
onClick: function () {
registry.byId("tp").set("open", true);
}
}).placeAt("buttonsPlace1");
new Button({
label: "Collapse fast",
onClick: function () {
registry.byId("tp").set("open", false);
}
}).placeAt("buttonsPlace1");
new Button({
label: "Expand via private method",
onClick: function () {
registry.byId("tp")._setOpenAttr(true, true);
}
}).placeAt("buttonsPlace2");
new Button({
label: "Collapse via private method",
onClick: function () {
registry.byId("tp")._setOpenAttr(false, true);
}
}).placeAt("buttonsPlace2");
new Button({
label: "Expand anim via set",
onClick: function () {
registry.byId("tp").set("open", true, true);
}
}).placeAt("buttonsPlace3");
new Button({
label: "Collapse anim via set",
onClick: function () {
registry.byId("tp").set("open", false, true);
}
}).placeAt("buttonsPlace3");
});
});

Záver

Pre otváranie a zatváranie widgetu TitlePane odporúčam používať zápis prostredníctvom metódy set() s troma argumentmi. Prvý definuje vlastnosť open, druhý stav vlastnosti open (true pre expand a false pre collapse). Posledný argument je typu boolean, ktorý povolí alebo zakáže animáciu.


Dojo,dijit/TitlePane,expand,collapse,set(),_setOpenAttr()
Ž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