1

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

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

4

1 回答 1

2

您可以将 jQuery 与 GWT 一起使用。

  1. 第一个键是JSNI。JSNI 是您可以从 GWT/Java 类中直接调用本机 JavaScript 函数的方式。
  2. 第二个关键是要意识到原生 JavaScript 代码中所有具有全局（窗口）范围的名称都是$wndJSNI 中对象的属性。
  3. 最后，JSNI 具有 GWT 编译器识别的符号，用于从 JavaScript 代码调用 GWT/Java 代码。这很重要，因为所有“Java”方法都编译为 JavaScript，并且在 JavaScript 中具有自动生成的名称。GWT 编译器必须在您的 JavaScript 代码中插入正确的名称才能调用“Java”代码。
  4. 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。

于 2012-08-09T02:54:58.930 回答