×
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.
Technologický web Mateja Lednára
Spoznávajte svet technológií

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

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.
Dojo,programovanie,dijit/registry,dojo/on,dojo/query,dojo/_base/lang,dijit/layout/ContentPane,dijit/layout/AccordionContainer,selected
Ž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