×
Creating solutions

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
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest