×
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 správne programaticky otvoriť dijit/DropDownMenu

Nedávno som riešil jeden problém, a to programatické otvorenie widgetu dijit/DropDownMenu. Keďže tento spôsob nie je zdokumentovaný, našiel som na internete riešenia, ktoré túto činnosť umožňujú. Žiaľ unikol tu jeden detail, a to, že otvorené menu nie je možné zatvoriť kliknutím mimo neho. Zatvoriť sa dá len kliknutím na hlavný button.
Keďže dokumentácia frameworku Dojo Toolkit je stále veľmi slabá, trvalo mi dlhší čas, kým som zistil, ako tento problém vyriešiť. Pre otvorenie widgetu dijit/DropDownMenu, ktorý je súčasťou dijit/form/DropDownButton je potrebné použiť metódu openDropDown(). Nasledujúci príklad demonštruje vytvorenie menu, ktoré je v buttone, a jeho otvorenie.
Príklad: Zápis do elementu <body>.
1
<div id="ddb"></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
33
require(["dojo/ready", "dijit/DropDownMenu", "dijit/MenuItem",
"dijit/form/DropDownButton", "dojo/dom"], function (ready, DropDownMenu,
MenuItem, DropDownButton, dom) {
ready(function () {
var menu = new DropDownMenu({
});
var item1 = new MenuItem({
label: "Item 1",
onClick: function () {
}
});
menu.addChild(item1);
var item2 = new MenuItem({
label: "Item 2",
onClick: function () {
}
});
menu.addChild(item2);
var ddb = new DropDownButton({
disabled: false,
label: "Menu",
dropDown: menu,
dropDownPosition: ["below", "above"]
}, "ddb");
ddb.startup();
ddb.openDropDown();
});
});
Aj keď to teraz vyzerá, že všetko je v poriadku, po pokuse zatvoriť menu nastane problém, že onBlur() zatvorenie nefunguje. Pre účely plnej funkcionality dijit/DropDownMenu je potrebné aplikovať metódu focus(). Nasledujúci príklad už zabezpečí plnú funkcionalitu otvorenie dijit/DropDownMenu.
Príklad: Zápis do elementu <body>.
1
<div id="ddb"></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
33
34
require(["dojo/ready", "dijit/DropDownMenu", "dijit/MenuItem",
"dijit/form/DropDownButton", "dojo/dom"], function (ready, DropDownMenu,
MenuItem, DropDownButton, dom) {
ready(function () {
var menu = new DropDownMenu({
});
var item1 = new MenuItem({
label: "Item 1",
onClick: function () {
}
});
menu.addChild(item1);
var item2 = new MenuItem({
label: "Item 2",
onClick: function () {
}
});
menu.addChild(item2);
var ddb = new DropDownButton({
disabled: false,
label: "Menu",
dropDown: menu,
dropDownPosition: ["below", "above"]
}, "ddb");
ddb.startup();
ddb.openDropDown();
ddb.focus();
});
});

Záver

Ako vidieť, Dojo má stále veľa vecí nezdokumentovaných, ktoré spôsobujú problémy pri vývoji aplikácií.


Dojo,dojo/dom,dojo/ready,dijit/DropDownMenu,dijit/MenuItem,dijit/form/DropDownButton,focus
Ž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