从GWT调用JQuery函数

我正在创建一个使用GWT的项目，设计师团队使用HTML和JQuery创建了一个原型。 我正在使用UIBinder“重建”UI。 我的问题是应用程序有一个使用JQuery的下拉菜单…它不起作用

到目前为止我尝试过的是在UIBinder XML中使用HTMLPanel并插入菜单，我保留了.js文件并在HTML文件中引用它们，希望操作将被拾取……但没有运气。

这是menu.ui.xml，显示菜单但没有鼠标hover

    
 
Accueil
 
  Configuration 
 
 
 
 Fiches de configuration 
 
Organisme
 
Groupe opérationnel
 
Unité opérationnelle
 
Immeuble
 
 
 
 
 
 
 
Audit
 
Résultats
 
Scénarios
 
Documents
 
   

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

    ... 
  

有没有办法让它在不使用GQuery或JSNI的情况下工作

谢谢

Answer 1

我试过elvispt的解决方案，它有效。 在JSNI代码中，我不得不用$wnd.jQuery替换$ ，否则它不会编译。

我还尝试了另一个我决定实现的解决方案：我没有在Menu周围使用包装器，而是在菜单类中覆盖了onAttach（）并调用了bind

 import com.google.gwt.core.client.GWT; public class Menu extends Composite { private static MenuUiBinder uiBinder = GWT.create(MenuUiBinder.class); interface MenuUiBinder extends UiBinder {} public Menu() { initWidget(uiBinder.createAndBindUi(this)); } @Override public void onAttach() { super.onAttach(); bind(); } private static native void bind() /*-{ $wnd.jQuery('#menu').find('.submenu').each(function(){ alert("inside"); var totalWidth = 0; $wnd.jQuery(this).children().each(function(){ totalWidth += $wnd.jQuery(this).outerWidth(); }).end().css({ 'display' : 'none', 'width' : totalWidth }); }).end().css({ 'overflow' : 'visible' }); }-*/; } 

再次感谢

Answer 2

在SimplePanel中包装uiBinder生成的类，然后覆盖onAttach()方法

由于生成的类是menu ：

创建另一个类，例如： menuCaller

  public class menuCaller extends SimplePanel { menu menuWrap = new menu(); public menuCaller() { add(menuWrapp); } @Override public void onAttach() { super.onAttach(); bind(); } private static native void bind() /*-{ $('#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' }); }-*/; }