comment fond de bouton dojo invisible ou supprimer?

Question

J'essaie de mettre une image à la place du bouton dojo. Je suis en mesure d'ajouter l'image, en arrière-plan, mais, le contour du bouton est visible. Je voudrais montrer l'image seulement. Que devrais-je faire?

mon code est le suivant.

css:

.EditButtonWidgetImage { 
    background-image: url("EditButton/images/edit.png"); 
    background-position: center; 
    background-repeat: no-repeat; 
    height: 25px; 
    width: 25px; 
} 

javascript:

var infoTableContainer = dojo.create("div", null, map.container); 

    var x = 200 - map.position.x; 
    var y = 50 - map.position.y; 

    this.InfoTable = new FloatingPane({ 
     title : "<b>Editor</b>", 
     resizable: true, 
     doLayout: true, 
     dockable: false, 
     closable: true, 
     //constrainToContainer: true, 
     'class': "EditWidgetContainer", 
     style: "left:"+x+"px;top:"+y+"px;padding:0px" 
    }, infoTableContainer); 
    //dojo.attr(infoTable, 'class', 'TableInfoWidgetContainer'); //ie8에서 class 예약어 처리로 인해 변경 

    dojo.connect(this.InfoTable, 'close', lang.hitch(this, function() { 
     //this.InfoTable.destroy(); 
     //console.log('infoGrid (infotable.destroy)=',this.InfoGrid); 
     if (this.InfoGrid) { 
      //this.InfoGrid.destroyRecursive(true); 
      this.InfoGrid.destroy(); 
      this.InfoGrid = null; 
      this.InfoGrid = undefined; 
     } 

     this.InfoTable = null; 
     this.InfoTable = undefined; 
    })); 

    //Border생성 
    var border = new BorderContainer({ 
     gutters: false, 
     design: 'headline', 
     style: "height:100%;width:100%;" 
    }) 

    //검색옵션 생성 
    var cpT = ContentPane({ 
     region: "top", 
     title: "검색 옵션", 
     style: "height:auto;width:100%;" 
    }); 

    this.cboService = new ComboBox({ 
     title: '서비스 : ', 
     searchAttr: "SVC_NM", 
     style: "width:120px;" 
    }); 

    this.cboLayer = new ComboBox({ 
     searchAttr: "LYR_NM", 
     style: "width:120px;" 
    }); 

    var btnResult = new Button({ 
     iconClass : "EditButtonWidgetImage", 
     style: "width:40px;margin-left:4px;" 
    }); 
    dojo.place('<label class="widget_field_label" style=width:70px; >편집대상 :&nbsp;</label>', cpT.domNode); 
    cpT.addChild(this.cboService); 
    dojo.place('<label class="widget_field_label" style=width:80px;>참조레이어 :&nbsp;</label>', cpT.domNode); 
    cpT.addChild(this.cboLayer); 
    cpT.addChild(btnResult); 

    border.addChild(cpT); 

    border.placeAt(this.InfoTable.containerNode); 
    border.startup(); 

    this.InfoTable.startup(); 

Answer 1

j'avais face à quelque chose de similaire, la solution qui a fonctionné pour moi était d'enlever la classe dijitButtonNode. Mais alors, cela vous laisserait avec une image et aucune indication que ce soit un bouton. Est-ce ce que tu veux vraiment?

domClass.remove(btnResult.domNode.childNodes[0], "dijitButtonNode") 

Sinon, vous pourriez ajouter et simples img tag et ajouter un événement de clic pour elle.

Answer 2

Si vous utilisez "dijit/form/Button", insérez juste la classe suivante et vous verrez le résultat.

Ici, j'ai remplacé la classe de boutons. Assurez-vous de limiter la portée à un bouton spécifique uniquement.

.claro .dijitButton .dijitButtonNode { 
    background-color: transparent; 
    border: none; 
    box-shadow: none; 
} 

Answer 3

Fondamentalement, vous devez remplacer la classe .dijitButtonNode du thème du dojo (dans ce cas Claro).

Vous pouvez utiliser le CSS suivant comme point de départ:

https://jsfiddle.net/zzot4zur/

.claro .dijitButton .dijitButtonNode { 
    background-color: transparent; 
    border: none; 
    box-shadow: none; 
    background-image: url("http://www.nuflowwidebay.com.au/wp-content/uploads/2015/10/expences-button-png-hi.png"); 
    background-size: 75px 30px; 
    background-repeat: no-repeat; 
    width: 75px; 
    height: 30px; 
} 

---

require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom) { 
    // Create a button programmatically: 
    var myButton = new Button({ 
    label: "Click me!", 
    onClick: function() { 
     // Do something: 
     dom.byId("result1").innerHTML += "Thank you! "; 
    } 
    }, "progButtonNode").startup(); 
}); 

---

<button id="progButtonNode" type="button"></button> 
<div id="result1"></div>