×
Vytvárame riešenia

Ako rýchlo vytvoriť drop down button (Dojo)

Jedným z používaných prvkov na internetových stránkach býva aj tlačidlo, po ktorého stlačení sa zobrazí ponuka. Framework Dojo má v ponuke widget s názvom DropDownButton, ktorého rýchle a jednoduché použitie bude v tomto článku predstavené.
Nasledujúci príklad demonštruje vytvorenie tlačidla s ponukou, ktorá obsahuje tri položky, kde posledná je oddelená od prvých dvoch čiarou.
Príklad: Deklaratívny zápis widgetu DropDownButton bez udalostí.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div data-dojo-type="dijit/form/DropDownButton" id="ddb">
<span>Menu</span>
<div data-dojo-type="dijit/Menu">
<div data-dojo-type="dijit/MenuItem">Item 1</div>
<div data-dojo-type="dijit/MenuItem">Item 2</div>
<div data-dojo-type="dijit/MenuSeparator"></div>
<div data-dojo-type="dijit/MenuItem">Item 3</div>
</div>
</div>
<script>
require(["dojo/ready", "dojo/parser"], function(ready, parser) {
ready(function() {
});
});
</script>
Uvedený príklad nemá aplikované funkcie, ktoré budú vykonané po kliknutí na jednotliví položky menu. Ich implementácia by v tomto prípade bola o niečo zložitejšia a preto je vhodné vytvoriť vlastný widget. Ten sa bude skladať z templatu a javascriptového súboru, ktorý obsahuje logiku widgetu, v tomto prípade má definované spracovanie udalostí. Následne je možné každej položke definovať čo sa má po stlačení vykonať.
Aktivovanie vytvoreného widgetu z druhého a tretieho príkladu sa vykoná prvým príkladom.
Príklad: Zápis do elementu <body> - aktivácia widgetu.
1
2
3
4
5
6
7
8
9
10
<div data-dojo-type="ddb"></div>
<script>
require(["dojo/ready", "ddbwidget", "dojo/parser"],
function(ready, parser) {
ready(function() {
});
});
</script>
Príklad: Zápis do súboru ddbwidget.js - vytvorenie widgetu.
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
define([
"dojo/_base/declare",
"dijit/_Widget",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/text!ddbTemplate.html",
"dijit/form/DropDownButton",
"dijit/Menu",
"dijit/MenuItem",
"dijit/MenuSeparator"
],
function(
declare,
_Widget,
_WidgetBase,
_TemplatedMixin,
_WidgetsInTemplateMixin,
template,
registry
) {
return declare("ddb", [
_Widget,
_TemplatedMixin,
_WidgetsInTemplateMixin
], {
templateString: template,
startup: function() {
this.inherited(arguments);
},
item1: function() {
console.log("Item 1");
},
item2: function() {
console.log("Item 2");
},
item3 : function() {
console.log("Item 3");
}
});
});
Príklad: Zápis do súboru ddbTemplate.html - definovanie tlačidla a menu.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
<div data-dojo-type="dijit/form/DropDownButton" id="ddb">
<span>Menu</span>
<div data-dojo-type="dijit/Menu">
<div data-dojo-type="dijit/MenuItem"
data-dojo-attach-event="onClick: item1">Item 1</div>
<div data-dojo-type="dijit/MenuItem"
data-dojo-attach-event="onClick: item2">Item 2</div>
<div data-dojo-type="dijit/MenuSeparator"></div>
<div data-dojo-type="dijit/MenuItem"
data-dojo-attach-event="onClick: item3">Item 3</div>
</div>
</div>
</div>

Záver

Ako vidieť vytvorenie menu s položkami, ktoré sa aktivuje na stlačenie tlačidla, je veľmi jednoduché. Veľmi dôležité je nezabudnúť na element <span>, ktorý definuje label tlačidla. Ak drop down button neobsahuje element, ktorý definuje text tlačidla, tlačidlo bude nesprávne renderované.
Dojo,dijit/form/DropDownButton,dijit/MenuItem,dijit/Menu,dijit/MenuSeparator
Ž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