Question

我在HTML和CSS中有一些代码，其中HTML如下所示：

<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="#">Welcome!</a></li>

我的CSS看起来像这样：

#avmenu
{
Style details
}

#avmenu li a:hover
{
Style details
}

a:hover{ Hover styles }

因此，当您将鼠标悬停在菜单上时，上面的代码会显示一个菜单项并执行一些动画，例如颜色更改等。我已经展示了足以解释手头问题的最小风格。

现在我将其迁移到GWT。我们使用Label作为菜单项，我也想在GWT中实现相同的效果。这是我试过的

我尝试应用名为＆＃34; avmenu＆＃34;的CSS样式，这应用了基本样式，但当然没有动画
然后我尝试 DOM.setElementAttribute(orgLbl.getElement(), "id", "avmenu"); ，但这也没有帮助。

以最少的时间和精力达到同样的效果，我最好的选择是什么？我当然可以在Label上听事件然后更改样式，但是对所有小部件执行此操作将是一种矫枉过正的行为！

编辑 - 更多信息：我正在使用Label构建菜单，并将其添加到树中 userMgmtLbl = new Label("User mgmt"); userMgmtLbl.setStyleName(HOME_MENU_LBL_STYLE); treeItem_1 = configParentTL.addItem(userMgmtLbl); userMgmtLbl.addClickHandler(Click logic)

Answer 1

发布如何在GWT中构建菜单。您可能没有在标签内使用锚点，因此您的：悬停样式显然无效。

Answer 2

您遇到的一个问题是GWT中的Tree和TreeItem由任意div组成，而不是原始html中的ul和li。（当您无疑可以检查GWT的showcase的DOM以查看底层小部件是如何创建的。）

这意味着您的选择器，例如“＃avmenu li a：hover”将不再有效。

如果您的导航菜单是静态的，那么最好的选择可能是使用GWT ui-binders，它们基本上都是gwts模板系统。如果您使用HTMLPanel作为根窗口小部件，则可以逐字有效地使用所有原始HTML，而不必担心尝试将所有DOM元素混合到相应的窗口小部件中。

基本小部件看起来像这样：

<强> NavigationWidget.java public final class YourWidget扩展Composite {

  YourWidget() {
    initWidget(binder.createAndBindUi(this));
  }

  private static final Binder binder = GWT.create(Binder.class);
  interface Binder extends UiBinder<Widget, YourWidget> {}
}

<强> NavigationWidget.ui.xml

<ui:UiBinder
   xmlns:gwt="urn:import:com.google.gwt.user.client.ui"
   xmlns:ui="urn:ui:com.google.gwt.uibinder">

  <gwt:HTMLPanel>
    <div id="avmenu">
      <h2 class="hide">Menu:</h2>
      <ul>
      <li><a href="#">Welcome!</a></li>
    </div>
  </gwt:HTMLPanel>

</ui:UiBinder>

顺便说一下，在这个示例中，HTMLPanel将自己的DIV添加到DOM中，使得第二个div有点多余。不幸的是，gwt中的小部件没有一种从模板设置ID属性的简单方法，所以除非你想将#avmenu选择器切换为.avmenu

，否则你会被第二个div所困扰。

从HTML，CSS到GWT世界的样式

2 个答案: