如何构建Vaadin演示采样器类型的页面

Question

我有一个简单的问题，我正在尝试构建类似于此URL中的内容    访问：http://demo.vaadin.com/sampler-for-vaadin6

具体来说，我想知道如何创建这些可以点击的框？我不确定这些是什么？它们是链接，图像还是按钮？

当鼠标移到这些盒子上时，我也是它周围的盒子。任何示例代码都非常受欢迎。

Answer 1

使用Vaadin创建采样器页面。根据FireBug，它是用CSSLayout制作的，那些盒子是用链接制作的。悬停效果使用以下css属性：

.v-csslayout-grid .screenshot a:hover span {
    background: url("screenshot-frame-hover.png") no-repeat scroll 1px 0px transparent;
}

Answer 2

您可以找到“相对”最新版本的Vaadin 6 Sampler here的代码。

至少这个版本（我认为是6.7.4）应该会给你一些你正在寻找的例子。