3

我完全坚持在 gwt 中创建一个 css 驱动的菜单。在渲染结果中，它应该看起来完全像这样：

    <div class="topbar">
                <div class="container fixed">
                    <h3>
                        <a href="" class="logo">test</a>
                    </h3>
        <ul class="nav secondary-nav">
              <li class="menu open">
                <a class="menu" href="#">Dropdown</a>
                <ul class="menu-dropdown">
                  <li><a href="">Secondary link</a></li>
                  <li><a href="">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="">Another link</a></li>
                </ul>
              </li>
        </ul>
</div>
</div>

除此之外，我想在所有超链接中使用 clickhandler 以及“下拉”链接的悬停。我考虑过生成不同的小部件，如 NavBar、NavBarItem 并稍后以编程方式将它们添加到 NavBar 小部件中，如 navBar.add("historytoken1", "Text") ，这将导致附加一个带有超链接的 li 标签等。

我需要用于导航和 CSS 操作的 clickhandler，以便我可以在 li 元素上设置一些新类。

我现在几乎整天都在这个小部件上进行试验，但我没有得到任何结果，因为 GWT 总是在 li 标签或其他地方放置愚蠢的 div。在流程面板等中仅使用小部件的限制也让我发疯:-)。

我不是在寻找一个完整的解决方案，但有人可以给我一个提示如何做到这一点吗？我的意思是让 ul 和 li 用于菜单并不是那么独特:-) 我不明白为什么 Gwt 不支持这一点。也许我正在监督一些事情。

顺便说一句-我正在尝试从这里合并这个我非常喜欢的 HTML Bootstrap：

推特助推器

谢谢

4

2 回答 2

5

您是否尝试过使用 UiBinder？例如，以下将生成您想要的标记。如果您想为链接添加点击处理程序，您可以在 GamboMenu 类中将它们指定为@UiField。

public class GamboMenu extends Composite {

            @UiField LIElement menuOpen;

    public GamboMenu() {
        initWidget(uiBinder.createAndBindUi(this));
                    menuOpen.getStyle().setDisplay(Display.NONE);
    }

    GamboMenuUiBinder uiBinder = GWT.create(GamboMenuUiBinder.class);

    interface GamboMenuUiBinder extends UiBinder<Widget, GamboMenu> {
    }
}

以及对应的 UiBinder 文件：

<!-- <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> -->
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    >

    <g:HTMLPanel styleName="topbar">
        <div class="container fixed">
              <h3><a href="" class="logo">test</a></h3>
            <ul class="nav secondary-nav">
                    <li ui:field="menuOpen" class="menu open">
                    <g:InlineHyperlink styleName="menu">Dropdown</g:InlineHyperlink>
                    <ul class="menu-dropdown">
                      <li><g:InlineHyperlink>Secondary link</g:InlineHyperlink></li>
                      <li><g:InlineHyperlink>Something else here</g:InlineHyperlink></li>
                      <li class="divider"></li>
                      <li><g:InlineHyperlink>Another link</g:InlineHyperlink></li>
                    </ul>
                    </li>
            </ul>
        </div>
    </g:HTMLPanel>

</ui:UiBinder>
于 2011-08-22T04:48:29.313 回答
1

大卫钱德勒为您的问题写了一个很好的答案：

https://turbomanage.wordpress.com/2010/02/11/writing-plain-html-in-gwt/

于 2012-05-02T14:52:15.260 回答