如何上色單個Dojo按鈕？

有沒有辦法影響單個Dojo按鈕的顏色？我希望能夠覆蓋特定按鈕的默認按鈕顏色。在JSP標記我已經定義，像這樣一個按鈕：如何上色單個Dojo按鈕？

<button class="jelam-button-blue" data-dojo-type="dijit/form/Button" data-dojo-id="usdotSearchButton" id="usdotSearchButton" type="button" onClick="csfController.usdotSearch()">Search</button>

其中「jelam按鈕藍色」在我們的CSS文件中定義，像這樣：

.jelam-button-blue { 
 
    background-color: #5494c7 !important; 
 
    background-image: none !important; 
 
    border: 1px solid #a6cdec !important; 
 
    border-radius: 0 !important; 
 
    color: #ffffff !important; 
 
    height: 38px; 
 
} 
 
.jelam-button-blue .dijitReset.dijitInline.dijitButtonText { 
 
    font-size: 16px; 
 
    font-weight: normal !important; 
 
    position: relative; 
 
    top: 2px; 
 
}

這不會導致按鈕變成藍色，因爲我願意。這會從按鍵的標記生成的標記是：

<span role="presentation" class="dijit dijitReset dijitInline dijitButton" widgetid="usdotSearchButton"> 
 
    <span role="presentation" data-dojo-attach-event="ondijitclick:__onClick" class="dijitReset dijitInline dijitButtonNode"> 
 
    <span aria-labelledby="usdotSearchButton_label" role="button" data-dojo-attach-point="titleNode,focusNode" class="dijitReset dijitStretch dijitButtonContents" tabindex="0" id="usdotSearchButton" style="-moz-user-select: none;"> 
 
     <span data-dojo-attach-point="iconNode" class="dijitReset dijitInline dijitIcon dijitNoIcon"></span> 
 
     <span class="dijitReset dijitToggleButtonIconChar">●</span> 
 
     <span data-dojo-attach-point="containerNode" id="usdotSearchButton_label" class="dijitReset dijitInline dijitButtonText">Search</span> 
 
    </span> 
 
    </span> 
 
    <input type="button" data-dojo-attach-point="valueNode" role="presentation" tabindex="-1" data-dojo-attach-event="onclick:_onClick" class="dijitOffScreen" value=""> 
 
</span>

和生成的標記不包括我已經指定了「jelam按鈕，藍色的」類中的任何引用。

我包括我從本地的主題道場模塊，定義dojoConfig變量之前包括我喜歡的dojo.js這樣：

<script> 
 
var dojoConfig = { 
 
    baseUrl: "/CompassThemesURS/themes/html/commonurs/", 
 
    async: false, // to support older pre-AMD IBM modules 
 
    tlmSiblingOfDojo: false, 
 
    packages: [ 
 
     { name: "gridx", location: "dojo/gridx-1.3.0" }, 
 
     { name: "dojo", location: "dojo/1.9.1/dojo" }, 
 
     { name: "dijit", location: "dojo/1.9.1/dijit" }, 
 
     { name: "dojox", location: "dojo/1.9.1/dojox" }, 
 
     { name: "commonjs", location: "js" } 
 
    ] 
 
}; 
 
</script> 
 
<script src="/CompassThemesURS/themes/html/commonurs/dojo/1.9.1/dojo/dojo.js.uncompressed.js" 
 
       data-dojo-config="isDebug:true, parseOnLoad: false"></script>

有沒有辦法把剛指定的按鈕指定的顏色？謝謝。

來源

2015-04-27 okorng

嘿okorng，可以提供更多的代碼嗎？你需要dijit嗎？（我的意思是你是如何在谷歌託管庫或本地添加dojo庫？） – dbd

我更新了問題，以表明我需要本地源dojo模塊，而不是Google CDN。謝謝。 – okorng

我確實運行了一個示例代碼，包含您的詳細信息，並且該按鈕是藍色的......沒有像您那樣的標記。（您是否嘗試以編程方式創建按鈕？） – dbd

您必須更新dijitButtonNode顏色。

我改變了你的CSS：

.jelam-button-blue .dijitButtonNode { 
background-color: #5494c7 !important; 
background-image: none !important; 
border: 1px solid #a6cdec !important; 
border-radius: 0 !important; 
color: #ffffff !important;

}

http://jsfiddle.net/theinnkeeper/eyLewa1n/2/

來源

2015-04-27 22:08:33 tik27

太棒了！謝謝！ – okorng

如何上色單個Dojo按鈕？

回答

相關問題