Как изменить цвет вкладки в vaadin? - PullRequest
Новая
       14

Как изменить цвет вкладки в vaadin?

1 голос
/ 23 января 2010

Здравствуйте, хотите изменить цвет вкладки, когда вкладка получает фокус в vaadin? Может ли кто-нибудь помочь мне, как настроить вкладку, чтобы добиться этого ..

Ответы [ 2 ]

4 голосов
/ 24 января 2010

Хорошая идея - использовать такой инструмент, как firebug, для проверки структуры DOM компонентов. Например, при проверке структуры DOM примера TabSheet в образце вы увидите, что все вкладки имеют класс стиля v-tabsheet-tabitem. Если вы выберете первую вкладку, она получит следующий класс стилей "v-tabsheet-tabitemcell", "v-tabsheet-tabitemcell-first" и "v-tabsheet-tabitemcell-selected-first". Если вы выберете вторую вкладку, она получит следующие классы стилей: «v-tabsheet-tabitemcell» и «v-tabsheet-tabitemcell-selected». Как вы увидите, стили, которые нужно изменить, немного зависят от положения вкладки в таблице.

Об изменении цвета вкладки, давайте взглянем на css выбранной вкладки. 


.v-tabsheet-tabitemcell-selected {
   background-image:url(common/img/vertical-sprites.png);
   background-position:left -1444px;
}

Как видите, фактический css не сложен. Техника, используемая в CSS, однако, не столь распространена, она использует своего рода оптимизацию. Все фоновые изображения объединены в одно изображение в формате png, и положение фонового изображения отрегулировано так, чтобы мы получили изображение, которое мы хотим показать в качестве фона. Что вам нужно сделать, это создать свою собственную тему и изменить это изображение в соответствии со своими потребностями. Обратитесь к Книге Ваадина за более подробной информацией о создании пользовательских тем.

2 голосов
/ 20 июля 2010

На самом деле, вам не нужно знать технику (спрайты CSS), чтобы изменить фон вкладок. Вам нужно будет использовать только обычный CSS, без магии.

Итак, создайте новое фоновое изображение (однотонного цвета недостаточно) и установите его в качестве фона соответствующего элемента. Повторите эти действия для всех соответствующих элементов, содержащихся на вкладке (они могут также указывать некоторый фон).

Если вы хотите изменить исходные изображения из темы оленей Vaadin, их можно найти здесь: http://dev.vaadin.com/browser/versions/6.4/WebContent/VAADIN/themes/reindeer/tabsheet/img

...