2010-11-23 26 views
3

dans mon GWT, j'ai un bouton feu comme ci-dessous pour créer un nouveau widget degwt utilisant l'effet jquery possible?

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


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

} 

comment utiliser jquery de sorte que lorsque le MyCustomWidget() montrer à l'écran, il utilise jquery « FADEIN » effet

J'ai déjà essayé de mettre jsni pour appeler jquery dans le nouveau MyCustomWidget() onload() mais ne marche pas. peut me guider à ce sujet?

+1

Vous pouvez essayer quelque chose comme t son: 1) Créer un widget 2) Définir la propriété d'affichage css du widget à "display: none" 3) Ajouter un widget à htmlPanelHolder 4) Appeler la méthode JSNI: public static native void fadeInWidget()/* - { $ ("mywidget: hidden") .fadeIn ("lent"); } - * /; –

+0

@ Xo4yHaMope. pour l'étape 4, devrais-je appeler fadeInWidget() dans l'étape 1 constructeur de widget après initwidget()? ou devrais-je appeler fadeInWidget() dans onload()? . aussi, $ ("mywidget: hidden"), est-ce l'id =? pour htmlPanelHolder? – cometta

+0

Vous devriez appeler fadeInWidget() à la toute fin, donc l'appeler après initwidget() devrait fonctionner. Et désolé il y a une erreur dans le code jQuery cela devrait être comme: $ ('# myDivId'). FadeIn ("slow"); ou $ ('. myCssClass'). fadeIn ("lent"); –

Répondre

11

Il est également possible de créer un fondu en vigueur sans utiliser jQuery. Si vous voulez faire cela, il suffit d'écrire une classe d'animation comme ceci:

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); 
    } 
} 

Ensuite, vous pouvez l'utiliser sur un widget:

new FadeInAnimation(myWidget).run(5000); 

Note: L'appel à getStyle().setOpacity(..) prend même en charge le cas particulier IE6/7, où il met style.filter = 'alpha(opacity=' + (value * 100) + ')';

+0

Merci pour le pourboire! Je l'ai juste utilisé sur mon site web. :) –