Ako prepínať panely v dijite AccordionContainer (Dojo)

Pri práci s dijitom AccordionContainer môže programátor naraziť na problém, ako prepínať jednotlivé okná akordeónu. Kým východiskové nastavenie pre zobrazenie panela je ešte jednoduché, programatické otváranie je už trošku zložitejšie.

Programatické otváranie dijitu AccordionContainer bude demonštrované na príklade, kde jednotlivé panely sa budú otvárať cez zobrazené tlačidlá. Pre jednoduchšiu demonštráciu sú všetky widgety vytvorené deklaratívnym spôsobom. Východiskové nastavenie dijitu AccordionContainer je vykonané prostredníctvom atribútu selected. Atribút sa aplikuje na potomka, teda dijit ContentPane.

Princíp prepínania panelov v akordeóne je založený na nasledujúcom zápise.

1
AccordionContainer.selectChild(ContentPane);
AccordionContainer.selectChild(ContentPane);

Nasledujúci príklad používa pokročilejšie techniky JavaScriptu / Dojo, ale vo svojej podstate je dôležitý zápis ac.selectChild(registry.byNode(pane));, ktorý zabezpečí otvorenie požadovaného panela. Príklad vychádza z princípu, že poradie tlačidiel zodpovedá poradiu okien v akordeóne. Na základe toho sa predáva pozícia tlačidla a porovnáva s poradím okien v akordeóne.

Príklad: Definovanie rozmerov akordeónu do elementu <style>.

1
2
3
4
#ac {
    width: 400px; 
    height: 300px;
}
#ac {
    width: 400px; 
    height: 300px;
}

Príklad: Deklaratívny zápis akordeónu a tlačidiel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="ac" data-dojo-type="dijit/layout/AccordionContainer">
    <div class="pane" data-dojo-type="dijit/layout/ContentPane" 
     title="Pane 1">
        Pane 1
    </div>
    <div class="pane" data-dojo-type="dijit/layout/ContentPane" 
     title="Pane 2" selected="true">
        Pane 2
    </div>
    <div class="pane" data-dojo-type="dijit/layout/ContentPane" 
     title="Pane 3">
        Pane 3
    </div>
</div>
<div id="buttons">
    <div class="pane" data-dojo-type="dijit/form/Button">Pane 1</div>
    <div class="pane" data-dojo-type="dijit/form/Button">Pane 2</div>
    <div class="pane" data-dojo-type="dijit/form/Button">Pane 3</div>
</div>
<div id="ac" data-dojo-type="dijit/layout/AccordionContainer">
    <div class="pane" data-dojo-type="dijit/layout/ContentPane" 
     title="Pane 1">
        Pane 1
    </div>
    <div class="pane" data-dojo-type="dijit/layout/ContentPane" 
     title="Pane 2" selected="true">
        Pane 2
    </div>
    <div class="pane" data-dojo-type="dijit/layout/ContentPane" 
     title="Pane 3">
        Pane 3
    </div>
</div>
<div id="buttons">
    <div class="pane" data-dojo-type="dijit/form/Button">Pane 1</div>
    <div class="pane" data-dojo-type="dijit/form/Button">Pane 2</div>
    <div class="pane" data-dojo-type="dijit/form/Button">Pane 3</div>
</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
require(["dojo/ready", "dijit/registry", "dojo/on", "dojo/query",
    "dojo/_base/lang", "dojo/parser"], 
    function(ready, registry, on, query, lang, parser) {
      ready(function() {
        query("#buttons .pane").forEach(function(node, pos) {
            on(node, "click", lang.partial(openPane, pos));
        });
 
        function openPane(panePosition, event) {
            var ac = registry.byId("ac");
            var pane = null;
            query("#ac .pane").forEach(function(node, pos) {
                if (panePosition == pos) {
                    pane = node;
                }
            });
 
            ac.selectChild(registry.byNode(pane));
        }
    });
});
require(["dojo/ready", "dijit/registry", "dojo/on", "dojo/query",
    "dojo/_base/lang", "dojo/parser"], 
    function(ready, registry, on, query, lang, parser) {
      ready(function() {
        query("#buttons .pane").forEach(function(node, pos) {
            on(node, "click", lang.partial(openPane, pos));
        });

        function openPane(panePosition, event) {
            var ac = registry.byId("ac");
            var pane = null;
            query("#ac .pane").forEach(function(node, pos) {
                if (panePosition == pos) {
                    pane = node;
                }
            });

            ac.selectChild(registry.byNode(pane));
        }
    });
});

Záver

Príklad by bolo možné zjednodušiť prostredníctvom atribútov id, ale preferoval som uvedený spôsob, ktorý je vďaka triedam univerzálny pre akýkoľvek počet tlačidiel a okien v akordeóne. V prípade, že poznáte iný zaujímavý spôsob ovládania dijitu AccordionContainer, podeľte sa oň prostredníctvom komentára.

Ako prepínať panely v dijite AccordionContainer (Dojo)

Záver

Komentáre

Pridať komentár