javascript - GWT-包装用jQuery编写的小部件

我想在GWT中使用菜单小部件（教程和代码在这里：http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/），该小部件具有用jQuery编写的javascript代码。
jQuery代码似乎很简单，但是我没有使用该库的经验，所以我想知道在GWT中使用（运行）该代码的最好的方法（快速简单）（也许我会使用其他方法） jQuery小部件）。

我找到了一个名为gwtquery的库，如果采用这种方法，那么任何建议或代码都将非常有用（在加快代码包装过程中）。

最佳答案

您可以将jQuery与GWT结合使用。


第一个键是JSNI。 JSNI是您可以从GWT / Java类直接调用本机JavaScript函数的方法。
第二个关键是要认识到，本机JavaScript代码中具有全局（窗口）范围的所有名称都是JSNI中$wnd对象的属性。
最后，JSNI具有一种GWT编译器可以识别的表示法，用于从JavaScript代码中调用GWT / Java代码。这很重要，因为所有“ Java”方法都已编译为JavaScript，并在JavaScript中具有自动生成的名称。 GWT编译器必须在JavaScript代码中插入正确的名称，这样它才能调用“ Java”代码。
GWT API使您可以访问DOM中的元素。如果在页面中创建元素，则GWT代码可以将它们作为元素访问。某些元素可以“包装”为小部件，但是某些小部件不支持包装简单的DOM元素。


这是一个简短的（未经测试的）示例，展示了如何从GWT的slide-down-box-menu网站中嵌入示例JavaScript代码。这个例子并没有做太多的GWT JSNI / jQuery交互，但是它确实将标准的jQuery代码集成到了GWT类中。

    import com.google.gwt.core.client.EntryPoint;
    public class MyEntryPoint implements EntryPoint
        {
        public void onModuleLoad()
            {
            this.configureMenu();
            }

        public static final native void configureMenu()
            /*-{
            $wnd.$(function() {
                    $wnd.$('#sdt_menu > li').bind('mouseenter',function(){
                            var $elem = $wnd.$(this);
                            $elem.find('img')
                                     .stop(true)
                                     .animate({
                                            'width':'170px',
                                            'height':'170px',
                                            'left':'0px'
                                     },400,'easeOutBack')
                                     .andSelf()
                                     .find('.sdt_wrap')
                                     .stop(true)
                                     .animate({'top':'140px'},500,'easeOutBack')
                                     .andSelf()
                                     .find('.sdt_active')
                                     .stop(true)
                                     .animate({'height':'170px'},300,function(){
                                    var $sub_menu = $elem.find('.sdt_box');
                                    if($sub_menu.length){
                                            var left = '170px';
                                            if($elem.parent().children().length == $elem.index()+1)
                                                    left = '-170px';
                                            $sub_menu.show().animate({'left':left},200);
                                    }
                            });
                    }).bind('mouseleave',function(){
                            var $elem = $wnd.$(this);
                            var $sub_menu = $elem.find('.sdt_box');
                            if($sub_menu.length)
                                    $sub_menu.hide().css('left','0px');

                            $elem.find('.sdt_active')
                                     .stop(true)
                                     .animate({'height':'0px'},300)
                                     .andSelf().find('img')
                                     .stop(true)
                                     .animate({
                                            'width':'0px',
                                            'height':'0px',
                                            'left':'85px'},400)
                                     .andSelf()
                                     .find('.sdt_wrap')
                                     .stop(true)
                                     .animate({'top':'25px'},500);
                    });
            });
            }-*/; // end JSNI method
        } // end class

gwtquery库不是您想要的库：它与jQuery无关，除了模仿它的API。