在gwt應用程序中使用mootools腳本

我的問題是在加載數據時啓動的Composite上創建動畫。我爲使用HTML測試正常div的動畫：在gwt應用程序中使用mootools腳本

<div class="LoadDataWidget"> 
    <div id="arrow" class="greenArrow"></div> 
</div> 


.LoadDataWidget { 
    width: 995px; 
    height: 591px; 
    background-image: url('images/ladowanie-danych.png'); 
    background-repeat: no-repeat; 
    position: relative; 
    margin: 0px auto; 
    visibility: hidden; 
} 

.LoadDataWidget .greenArrow { 
    width: 102px; 
    height: 141px; 
    background-image: url('images/ladowanie-danych-strzalka.png'); 
    background-position: bottom; 
    background-repeat: no-repeat; 
    position: absolute; 
    left: 500px; 
    top: 205px; 
}

的JavaScript + mootools的動畫腳本：

window.addEvent('domready', function(){ 

     var effect = new Fx.Tween('arrow', {duration: 800}),periodical; 

     // Create the function wich will run the effect 
     var fx = function() { 
      effect.start('height', '141').chain(function(){ 
       effect.start('height', '161'); 
      }); 
      // return this function, so you could do fx() which returns fx, 
      //or fx()()() which still returns fx and runs the function 3 times 
      return fx; 
     }; 

     fx().periodical(1700); 

     // assing 'singleImage' variable to the image tag with the 'image' ID 
     var singleImage = $$('.LoadDataWidget'); 

     // set a bunch of CSS styles to the aforementioned image 
     singleImage.set('styles', { 
      'opacity': 0, 
      'visibility': 'visible' 
     }); 

     // fade in the image 
     singleImage.fade('in'); 


});

它的工作原理。這是一個從上到下的箭頭動畫。

但是，當我嘗試在具有類「LoadDataWidget」和id「箭頭」的元素的gwt應用程序中使用此腳本時，它不起作用。

而且有GWT組合大的Java代碼，我嘗試動畫：

import com.google.gwt.user.client.ui.SimplePanel; 

public class LoadDataWidget extends SimplePanel { 

    public LoadDataWidget() { 
     setStyleName("LoadDataWidget"); 
     SimplePanel arrow = new SimplePanel(); 
     arrow.setStyleName("greenArrow"); 
     arrow.getElement().setId("arrow"); 
     setWidget(arrow); 
    } 
}

是否與domready中事件的問題？你有沒有解決這個問題的線索？

來源

2011-08-31 Mirek

刪除了Java標記。 Java不是Javascript，它是完全獨立的語言。 –

我知道...但GWT（Google Web Toolkit）是一個Java框架。所以我認爲它也與Java連接 – Mirek

如果你需要Java代碼，只能標記爲Java。另外，我認爲GWT是AJAX，它是JavaScript或Actionscript，對吧？ –

您的domready事件在加載html和DOM準備好之後，但在加載並執行GWT之前觸發。

嘗試通過JSNI在加載GWT後調用您的函數。

來源

2011-08-31 19:41:03

謝謝你的線索彼得。你能告訴我如何通過JSNI激發js功能嗎？我在部分創建了js函數，這個函數的名字是animate（）。所以現在我怎麼能在Java metod中觸發它：public static native void startAnimation（）/ * - { \t // animation（）; ？ \t} - * /; – Mirek

試試'$ wnd.animation（）;' –

它起作用。所以非常感謝:) – Mirek

在gwt應用程序中使用mootools腳本

回答

相關問題