2010-11-23 6 views
3

は、私は新しいウィジェットjquery効果を使用してgwtできますか?私のGWTで

@UiHandler("buttonfire") 
    void addNewWidget(ClickEvent event) { 


    htmlPanelHolder.add(new MyCustomWidget(),"placeholder"); 

} 
を作成するには、以下のような火のボタンを持っている

jqueryのを使用する方法となるよう際MyCustomWidget()、それは「フェードイン」jqueryのを使用している画面に表示効果

私はすでにjsniを新しいMyCustomWidget()onload()内でjqueryを呼び出すことを試みましたが、動作しませんでした。これについて私を導くことができますか?

+1

を設定IE6/7、あなたはトンのような何かを試すことができますhtmlPanelHolderにウィジェットを追加する4)JSNIメソッドを呼び出す:public static native void fadeInWidget()/ * - { $( "mywidget:hidden")ウィジェットを作成し、 ).fadeIn( "遅い"); } - * /; –

+0

@ Xo4yHaMope。 step4では、initwidget()の後に、ステップ1のウィジェットコンストラクタでfadeInWidget()を呼び出す必要がありますか? onload()内でfadeInWidget()を呼び出す必要がありますか? 。また、$( "mywidget:hidden")、これはidですか? htmlPanelHolderの場合 – cometta

+0

最後にfadeInWidget()を呼び出す必要があります。そうすれば、initwidget()の後に呼び出すことができます。そして、申し訳ありませんが、jQueryコードに間違いがあります。$( '#myDivId')。fadeIn( "slow");または$( '。myCssClass')。fadeIn( "slow"); –

答えて

11

それはjQueryのを使用しなくても効果にフェードインを作成することも可能です。あなたがいることをしたい場合は、ちょうどこのようAnimationクラスを記述します。

public class FadeInAnimation extends Animation { 
    private final UIObject uiObject; 

    FadeInAnimation(final UIObject uiObject) { 
     this.uiObject = uiObject; 
    } 

    @Override 
    protected void onUpdate(final double progress) { 
     uiObject.getElement().getStyle().setOpacity(progress); 
    } 
} 

その後は、任意のウィジェット上でそれを使用することができます。

new FadeInAnimation(myWidget).run(5000); 

注:getStyle().setOpacity(..)への呼び出しもの世話をします特殊な場合、それはstyle.filter = 'alpha(opacity=' + (value * 100) + ')';

+0

チップをありがとう!私のウェブサイトでそれを使っただけです。 :) –