0

こんにちは、GWT を使用してドロップダウン メニューを作成しようとしています。これは私が達成しようとしているレイアウトです:

| Categories | Pictures | Other |

ここで、カテゴリが開いたら、カテゴリを 2 つのグループに分けて表示する実際のドロップダウンを表示したいと思います。まあ言ってみれば：

 | 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つのペアで表示されるため、ニーズに合わないようです。そのため、マウスを行の上に移動すると、1つだけではなく両方が選択されます。

私は現在 FlexTable を使用しているので、基本的には空白のマトリックスがあり、アイテムを持つ唯一のカテゴリであるため、カテゴリの要素のみを表示します。つまり、すべての要素は行列のセルです。私はユースケースをほぼ達成していますが、現在プログラムされている方法は少しハックで不自然です..現在、次のようになっています。

       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。このウィジェットでは、1 つの子ウィジェットをドロップダウンの項目のコンテナーとして設定できます。そのため、さまざまなレイアウトを作成できます。あなたの場合、この構造を簡略化することができます：

<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/から始めることができるフィドルです

于 2012-04-29T21:40:02.210 に答える