Question

我完全坚持在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并悬停链接“Dropdown”。我想过生成不同的小部件，如NavBar，NavBarItem，稍后将程序性地添加到NavBar小部件，如navBar.add（“historytoken1”，“Text”），这将导致附加带有超链接的li标签等。

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

我现在几乎整天在这个小小部件上进行实验，我没有得到任何结果，因为GWT总是在li标签之间或其他地方放置愚蠢的div。在flowpanels等中仅使用小部件的限制也让我发疯： - ）。

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

BTW-我正在尝试将这个HTML Bootstrap从这里加入，我非常喜欢：

Twitter Boostrap

由于

Answer 1

您是否尝试过使用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>

Answer 2

David Chandler为你的问题写了一个很好的答案：

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

具有列表项的GWT无序列表

2 个答案: