×
Creating solutions

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