从 GWT 调用 JQuery 函数

Question

我正在启动一个使用 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 代码上

$('#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'
});

在单独文件common.js EntryPoint

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

谢谢

Answer 1

我尝试了 elvispt 的解决方案，它有效。在 JSNI 代码中，我必须将 $ 替换为 $wnd.jQuery，否则它无法编译。

我还尝试了我决定实现的第二个解决方案：我没有在 Menu 周围使用包装器，而是在 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<Widget, Menu> {}        

    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

将 uiBinder 生成的类包装在 SimplePanel 中，然后重写 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'
                   });
        }-*/;
    }