×
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.
Technologický web Mateja Lednára
Spoznávajte svet technológií

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>
Ď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");
}
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
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.
Dojo,dijit/form/Select,popup,dropDown,dijit/registry
Ž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