×
Creating solutions

Ako programaticky vytvoriť widget ListItem (Dojo)

Keďže dokumentácia k Dojo ešte stále nie je dostatočná, začínajúci programátori môžu naraziť na problém, ako vytvoriť widget dojox/mobile/ListItem programaticky. V tomto článku je demonštrované vytvorenie widgetu ListItem prostredníctvom cyklu.
Pre vytvorenie zoznamu je potrebné definovať kontajner. Pre tento účel môže poslúžiť widget dojox/mobile/EdgeToEdgeList. Widgetu priradíme atribút id pre jeho identifikáciu. Identifikáciu elementu vykonáme prostredníctvom modulu dijit/registry.
Príklad: Deklaratívne vytvorenie kontajnera pre zoznam.
1
2
<ul id="listContainer" data-dojo-type="dojox/mobile/EdgeToEdgeList">
</ul>
Ako prvý krok pre vytvorenie položiek zoznamu je potrebné definovať kontajner, do ktorého budú položky zoznamu generované. Pre vytvorenie položky zoznamu použijeme constructor, ktorému predáme dve vlastnosti: label a icon. Vlastnosť label definuje názov položky, teda text, ktorý bude zobrazený. Vlastnosť icon umožňuje položke pridať pred text ikonu. Ak ikona nie je potrebná, vlastnosť môžete odstrániť alebo zakomentovať. Po identifikácii kontajnera a vytvorení položky sa položka pridá do kontajnera prostredníctvom metódy addChild().
Príklad: Vytvorenie položiek zoznamu programaticky.
1
2
3
4
5
6
7
8
9
10
11
12
13
var listContainer = registry.byId("listContainer");
function createListItem(index) {
var item = new ListItem({
label: "Item " + index,
icon: "../images/icon.png" // optional property - left icon
});
listContainer.addChild(item);
}
for (var i = 1; i < 6; i++) {
createListItem(i);
}
Obrázok: Výsledný zoznam.
Výsledný zoznam.

Záver

Ako vidieť, programatické vytváranie položiek zoznamu je veľmi jednoduché. Widget dojox/mobile/ListItem ponúka aj ďalšie vlastnosti, ktorých popis je uvedený v dokumentácii - API.


Dojo,programovanie,mobile,dojox/mobile/ListItem,dijit/registry,dojox/mobile/EdgeToEdgeList
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