1

嗨，当标签在 vaadin 中获得焦点时，您想更改标签颜色吗？谁能帮助我如何自定义标签页来实现这一点。

4

2 回答 2

4

使用像 firebug 这样的工具来检查组件的 DOM 结构是个好主意。例如，在查看示例中 TabSheet 示例的 DOM 结构时，您会看到所有选项卡都有样式类 v-tabsheet-tabitem。如果选择第一个选项卡，它将获得以下样式类“v-tabsheet-tabitemcell”、“v-tabsheet-tabitemcell-first”和“v-tabsheet-tabitemcell-selected-first”。如果选择第二个选项卡，它将获得以下样式类：“v-tabsheet-tabitemcell”和“v-tabsheet-tabitemcell-selected”。正如您将看到的，您需要修改的样式有点取决于选项卡在选项卡中的位置。

关于改变tab的颜色，我们看一下选中的tab的css。


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

如您所见，实际的 css 并不复杂。然而，css 中使用的技术并不常见，它使用了一种优化。所有的背景图像都连接在一个单独的 png 图像中，并调整背景图像的位置，以便我们获得想要显示为背景的图像。您需要做的是创建自己的主题并修改该图像以适合您自己的需求。有关创建自定义主题的更多详细信息，请查看 Vaadin 之书。

于 2010-01-24T17:04:31.440 回答
2

实际上，您无需了解技术（CSS sprites）即可更改选项卡的背景。您只需要使用常规 CSS，不涉及任何魔法。

因此，创建一个新的背景图像（纯色是不够的）并将其设置为相关元素的背景。对选项卡中包含的所有相关元素重复此操作（它们也可能指定一些背景）。

如果您想修改 Vaadin Reindeer 主题的原始图像，可以从这里找到它们：http: //dev.vaadin.com/browser/versions/6.4/WebContent/VAADIN/themes/reindeer/tabsheet/img

于 2010-07-20T11:45:43.337 回答