Question

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

我找到了一个名为gwtquery的库，如果这是采取的方法，任何建议或代码将非常有用（加快代码换行过程）。

Answer 1

您可以将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中的下拉框菜单网站中嵌入示例JavaScript代码。此示例没有做太多GWT＆lt; - ＆gt; 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库不是你想要的：除了模仿它的API之外，它与jQuery无关。

GWT - 用jQuery编写的Wadpping小部件

1 个答案: