Ako definovať CSS triedy pre dijit/form/Select

Dojo Toolkit pri niektorých widgetoch používa popup okná, ktoré oddeľuje od aktuálneho DOMNode. Výsledkom je, že nastavenie CSS triedy widgetu nemá vplyv na tento popup. V tomto článku sa zameriam na widget dijit/form/Select, kde priradím triedu každej hlavnej časti widgetu.

Ako prvé vytvoríme deklaratívne widget dijit/form/Select so štyrmi položkami.

Príklad: Zápis do elementu <body>.

1
2
3
4
5
6
<select id="select" data-dojo-type="dijit/form/Select" class="select-widget">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
    <option value="4">Item 4</option>
</select>
<select id="select" data-dojo-type="dijit/form/Select" class="select-widget">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
    <option value="4">Item 4</option>
</select>

Ďalej nájdeme widget dijit/form/Select cez HTML atribút id, ktorý sme definovali elementu <select>. Vo widgete definujeme subwidgetu menu CSS triedu select-popup-table. Keďže popup ešte nie je k dispozícii, priradenie CSS pre popup menu nie je teraz možné. Pre priradenie CSS popup menu používam event onOpen. Po otvorení menu už mám prístup aj k popup menu, kde definujem triedu select-popup.

1
2
3
4
5
var select = registry.byId("select");
select.dropDown.domNode.classList.add("select-popup-table");
select.dropDown.onOpen = function () {
    this.domNode.parentNode.classList.add("select-popup");
}
var select = registry.byId("select");
select.dropDown.domNode.classList.add("select-popup-table");
select.dropDown.onOpen = function () {
    this.domNode.parentNode.classList.add("select-popup");
}

Výsledný DOM je možné pozrieť na nasledujúcom obrázku, na ktorom je demonštrovaná štruktúra widgetu dijit/form/Select.

Obrázok: Zobrazenie DOM widgetu dijit/form/Select

Názvy tried si môžete zvoliť podľa potreby. Uvedené názvy sú určené na definovanie hlavných častí widgetu, preto v aplikácii odporúčam zvoliť výstižnejšie názvy.

Záver

Ak poznáte iný spôsob ako priradiť CSS pre dijit/form/Select, podeľte sa oň prostredníctvom komentára. Verím, že vám tento článok pomôže pri štýlovaní ďalších widgetov.

Ako definovať CSS triedy pre dijit/form/Select

Záver

Komentáre

Pridať komentár