動態更改背景顏色

Question

我想更改我的Vaadin應用程序在OptionGroup組件的valueChange事件上的背景顏色。

由於頁面上的佈局數量相當多，最好的辦法是更改每個Horizo​​ntalLayout和VerticalLayout背景顏色，但每個可添加的新組件都應具有此顏色。

我該如何做到這一點？謝謝。

Answer 1

想到兩種方法。

最簡單，在概念上以及實施方面，將有一個單一的組件作爲背景，並給你的HorizontalLayout和VerticalLayout組件一個透明的背景。如果你的佈局太複雜，你可以有一些基本的「背景」組件，同樣，頂層的佈局組件是透明的。這個想法是減少你需要改變顏色的組件的顏色。

如果該方法不能轉化爲您的用例，您可以隨時使用JavaScript來即時選擇佈局組件並重新定義其背景。通過爲所有佈局組件提供一個常見的CSS類（例如：'dynamic-background'），這可以變得更易於管理。

JavaScript.getCurrent().execute("$('.dynamic-background').css('background-color', 'purple')"); 

注意，這個JavaScript取決於JQuery的，有一個到處尋找更多的細節與Vaadin整合JQuery的：
Add javascript/Jquery & client side code in Vaadin 7
Integrating HTML and JavaScript in Vaadin 7