我正在启动一个使用 GWT 的项目,设计团队使用 HTML 和 JQuery 制作了一个原型。我实际上正在使用 UIBinder 来“重建”UI。我的问题是应用程序有一个使用 JQuery 的下拉菜单...但它不起作用
到目前为止,我尝试的是在 UIBinder XML 中使用 HTMLPanel 并插入菜单,我保留 .js 文件并在 HTML 文件中引用它们,希望能够拾取这些操作...但没有运气。
这是menu.ui.xml,菜单显示但鼠标没有悬停
<!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>
<!-- menu -->
<ul id="menu">
<li class="home"><a href="#"><span>Accueil</span></a></li>
<li class="configuration">
<g:Anchor ui:field="configurationButton" href="#">
<span>Configuration</span></g:Anchor>
<div class="submenu">
<div class="group">
<ul>
<li>
<a href="#">Fiches de configuration</a>
<ul>
<li><a href="#">Organisme</a></li>
<li><a href="#">Groupe opérationnel</a></li>
<li><a href="#">Unité opérationnelle</a></li>
<li><a href="#">Immeuble</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="audit"><a href="#"><span>Audit</span></a></li>
<li class="result"><a href="#"><span>Résultats</span></a></li>
<li class="scenario"><a href="#"><span>Scénarios</span></a></li>
<li class="document"><a href="#"><span>Documents</span></a></li>
</ul>
<!-- menu.end -->
</g:HTMLPanel>
JQuery 代码位于单独的文件 common.js 中
$('#menu').find('submenu').each(function(){
alert("inside");
var totalWidth = 0;
$(this).children().each(function(){
totalWidth += $(this).outerWidth();
}).end().css({
'display' : 'none',
'width' : totalWidth
});
}).end().css({
'overflow' : 'visible'
});
入口点
public class M3T implements EntryPoint {
public void onModuleLoad() {
Menu menu = new Menu();
RootPanel.get("menuwrapper").add(menu);
}
}
在 HTML 中,我有一个插入菜单的 div
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.lib.min.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script> ...
<div id="menuwrapper"> </div>
有没有什么方法可以让它在不使用 GQuery 或 JSNI 的情况下工作
谢谢