带有翻转动画的 GWT 模态对话框(如效果库)

Question

我需要创建一个垂直或水平排列的模态对话框。

我找到了效果库，这很好，但是如何将其集成到GWT中。

我将js文件添加到GWT的HTML文件中，样式在对话框中定义。但我看不出有任何影响。

如何在对话框中应用翻转效果，或者是否有任何其他方法可以实现此目的。

弹出面板：

<g:PopupPanel ui:field="container" height="300px" width="500px"
        autoHideEnabled="true" glassEnabled="true" styleName="{style.gwtDialogBox}">
        <g:HTMLPanel width="595px" height="297px">
            <g:FlowPanel>
                <g:Image url="images/close.ico" styleName="{style.right}" />
            </g:FlowPanel>
        </g:HTMLPanel>
    </g:PopupPanel>

JS文件中的JS函数。

var ModalEffects = (function() {
    function init() {

        [].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
            var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
                close = modal.querySelector( '.md-close' );
            function removeModal( hasPerspective ) {
                classie.remove( modal, 'md-show' );
                if( hasPerspective ) {
                    classie.remove( document.documentElement, 'md-perspective' );
                }
            }
            function removeModalHandler() {
                removeModal( classie.has( el, 'md-setperspective' ) ); 
            }
            el.addEventListener( 'click', function( ev ) {
                classie.add( modal, 'md-show' );
                overlay.removeEventListener( 'click', removeModalHandler );
                overlay.addEventListener( 'click', removeModalHandler );
                if( classie.has( el, 'md-setperspective' ) ) {
                    setTimeout( function() {
                        classie.add( document.documentElement, 'md-perspective' );
                    }, 25 );
                }
            });
            close.addEventListener( 'click', function( ev ) {
                ev.stopPropagation();
                removeModalHandler();
            });
        } );
    }
    init();
})();

这是来自效果库。

谢谢班纳特。

Answer 1

将.js放在公用文件夹中，该文件夹放置在 gwt.xml 文件所在的同一包中的客户端文件夹旁边。

像这样的事情

-ProjectName
  - src
    - com.myProj
      - public
        -js
           yourJS.js
      *.gwt.xml

也把它放在你的gwt中.xml

<script src="_js-url_"/>

编译并尝试。另请参阅此处以供参考