0

您好我正在尝试使用 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 小部件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 小部件布局。

谢谢

4

2 回答 2

2

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

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

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

在显示下拉菜单之前，请确保根据单击的标签更新弹出位置。如果菜单下拉菜单很复杂，请尝试UiBinder使用XML.

这是DecoratedPopupPanel单击按钮时显示的示例。

更多关于 UiBinder 的内容，不熟悉的可以看这里。

于 2012-04-30T14:26:48.143 回答
1

这是一个小提琴，您可以从http://jsfiddle.net/UUHyj/开始，它使用的只是 css，但对于 ie6 down，您将需要 javascript 来进行翻转等

于 2012-04-29T21:40:02.210 回答