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. 27.11.2016, Matej LednárKategória: DojoDojo,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.
