Question

您好我正在尝试使用GWT创建一个下拉菜单。这是我想要实现的布局：

| Categories | Pictures | Other |

现在，当类别打开时，我想显示实际下拉列表，以两个为一组显示类别。让我们说：

 | Categories | Pictures | Other |
 |  Cat 1    Cat 2   |
 |  Cat 3    Cat 4   |
 |  Cat 5    Cat 6   | <---------- Menu of categories here
 |  Cat 7    Cat 8   |
 |  Cat 9    Other   |
  -------------------

我查看了MenuBar Widget http://gwt.google.com/samples/Showcase/Showcase.html# MenuBar以及那里的其他小部件。然而，似乎并不符合我的需要，因为类别将以2对显示，所以当我将鼠标移动到一行时，它将选择它们而不是只有一个。

我目前正在使用FlexTable，所以基本上我有一个带空格的矩阵，我只显示类别中的元素，因为它是唯一有项目的元素。换句话说，所有元素都是矩阵中的单元格。我几乎达到了用例但是，目前编程的方式有点hacky和不自然..目前它看起来像这样：

       Column1        |       Col2   |  Col3
| Categories                Pictures | Other |               <- Row1
|  Cat 1                     Cat 2   |  Empy |               <- Row2
|  Cat 3                     Cat 4   |  Empy |               <- Row3
|  Cat 5                     Cat 6   |  Empy |   <---------- Menu of categories here
|  Cat 7                     Cat 8   |  Empy |               <- Row5
|  long descriptions ruin layout     |  Empy |               <- Row6
-------------------------------------

因此，“图片”和“其他”标题的布局将始终根据类别菜单的宽度移动。

有人可以给我一个关于如何使用GWT实现这一目标的建议吗？我知道可以选择创建自己的小部件。但在此之前，我想知道如何实现这一目标。可能有人可以指导我如何集成另一种技术，如jQuery，或实现添加CSS类或特定GWT小部件布局的格式，允许具有不同的列和行大小。

谢谢

Answer 1

你可以使用，例如，制作菜单的标签。点击标签（可以鼠标悬停在...上），您将显示相应的下拉菜单。

下拉菜单应该是（或扩展）DecoratedPopupPanel。在此窗口小部件中，您可以将一个子窗口小部件设置为下拉列表中项目的容器。所以你可以有很多不同的布局。对于您的情况，您可以使用此结构，简化：

<g:HorizonatlPanel>
  <g:VerticalPanel>
     items in first column
  </g:VerticalPanel> 
  <g:VerticalPanel>
     items in second column
  </g:VerticalPanel>
</g:HorizontalPanel>

在显示下拉列表之前，请确保根据点击的标签更新弹出窗口位置。如果菜单下拉菜单很复杂，请尝试使用UiBinder使用XML来表达布局。

Here是按钮点击时显示DecoratedPopupPanel的示例。

有关UiBinder的更多信息，如果您不熟悉，请找here。

Answer 2

这里有一个小提琴你可以从http://jsfiddle.net/UUHyj/开始它所用的全部是css但是对于ie6 down你将需要javascript来进行翻转等

GWT - 如何创建下拉菜单

2 个答案: