twitter-bootstrap 带有列表项的 GWT 无序列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7139061/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
GWT Unordered List with List Items
提问by Gambo
I am completely stuck with the creation of a css driven menu in gwt. In the rendered result it should look exactly like this:
我完全坚持在 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>
In addition to that I want to get use of the clickhandler in all Hyperlinks and the hover of the link "Dropdown". I thought about generating different widgets like NavBar, NavBarItem and adding them later programmaticaly to the NavBar widget like navBar.add("historytoken1", "Text") and this will result in appending a li tag with a hyperlink to it etc.
除此之外，我想在所有超链接中使用 clickhandler 以及链接“Dropdown”的悬停。我想过生成不同的小部件，如 NavBar、NavBarItem，然后以编程方式将它们添加到 NavBar.add("historytoken1", "Text") 等 NavBar 小部件，这将导致附加带有超链接的 li 标签等。
I need the clickhandler for navigation and as well for css manipulation so that I can set some new classes on the li elements.
我需要用于导航和 css 操作的 clickhandler，以便我可以在 li 元素上设置一些新类。
I am experimenting now almost the whole day on this little widget and I am getting no results as GWT is always putting stupid divs between the li tags or somewhere else. The limitation of using only widgets in flowpanels etc. is also driving me crazy :-).
我现在几乎一整天都在这个小部件上进行实验，但我没有得到任何结果，因为 GWT 总是在 li 标签之间或其他地方放置愚蠢的 div。在 flowpanels 等中仅使用小部件的限制也让我发疯:-)。
I am not looking for a finished solution but can somebody giving me a hint how to do this? I mean having ul and li for menu is not that unique :-) and I dont understand why Gwt is not supporting this. Maybe I am overseeing something.
我不是在寻找一个完整的解决方案，但有人可以给我一个提示如何做到这一点吗？我的意思是菜单 ul 和 li 并不是那么独特:-)，我不明白为什么 Gwt 不支持这一点。也许我正在监督某事。
BTW- i am trying to incorporate this HTML Bootstrap from here which I really like:
顺便说一句-我正在尝试从这里合并这个我非常喜欢的 HTML Bootstrap：
Thanks
谢谢
回答by nogridbag
Have you tried using UiBinder? For instance, the following will generate your desired markup. If you wanted to add click handlers to the links, you can specify them as @UiField's in the GamboMenu class.
您是否尝试过使用 UiBinder？例如，以下将生成您想要的标记。如果您想向链接添加点击处理程序，您可以在 GamboMenu 类中将它们指定为 @UiField's。
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> {
}
}
And the corresponding UiBinder file:
以及对应的 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>
回答by Marcel H.
David Chandler wrote a good answer to your question:
大卫·钱德勒 (David Chandler) 很好地回答了您的问题：
https://turbomanage.wordpress.com/2010/02/11/writing-plain-html-in-gwt/
https://turbomanage.wordpress.com/2010/02/11/writing-plain-html-in-gwt/
