×
Creating solutions

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
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