×
Vytvárame riešenia

Ako pridať CSS triedu do widgetu dijit/form/Button (Dojo)

V tomto článku predstavím, ako sa dá pridať CSS trieda do widgetu dijit/form/Button. Štandardnou vlastnosťou className sa žiaľ do niektorých widgetov CSS trieda nedá pridať. Medzi také patria dijit/form/Button a dijit/form/DropDownButton. Pri reportovaní tohto bugu som dostal odpoveď, že oprava sa zatiaľ neplánuje.
Jednou z možností je vytvoriť vlastný button.
Príklad: Vlastný button vytvorený z widgetu dijit/form/Button.
1
2
3
4
5
6
7
8
9
10
var Button = declare([
DijitButton
], {
postCreate: function () {
if (this.className) {
this.domNode.classList.add(this.className);
}
this.inherited(arguments);
}
});
Príklad: Aplikovanie vytvoreného widgetu Button.
1
2
3
new Button({
className: "button-class"
}).placeAt(id);
Druhou možnosťou je použitie pôvodného buttona a pridanie CSS triedy dodatočne.
Príklad: Pridanie CSS triedy button-class dodatočne.
1
2
3
var btn = new Button({
}).placeAt(id);
btn.domNode.classList.add("button-class");
Treba ale upozorniť, že vlastnosť className nie je úplne ignorovaná a je pridaná na focusNode. Takže ak chcete mať CSS triedu len na roote widgetu, je potrebný ešte nasledujúci zápis.
Príklad: Odstránenie CSS triedy button-class z focusNode.
1
btn.focusNode.classList.remove("button-class");
Príklad: Dodatočné pridanie a odstránenie CSS triedy button-class .
1
2
3
4
var btn = new Button({
}).placeAt(id);
btn.domNode.classList.add("button-class");
btn.focusNode.classList.remove("button-class");
Príklad: Vytvorenie vlastného widgetu Button s CSS triedou na root elemente.
1
2
3
4
5
6
7
8
9
10
11
var Button = declare([
DijitButton
], {
postCreate: function () {
if (this.className) {
this.domNode.classList.add(this.className);
this.focusNode.classList.remove(this.className);
}
this.inherited(arguments);
}
});

Záver

Ja osobne odporúčam vytvorenie vlastného buttona, teda riešenie s declare, ktoré je objektovo orientované a umožní jednou zmenu zmeniť všetky inštancie.


Dojo,dijit/form/Button,dojo/_base/declare,className
Ž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