3

我正在尝试使用 jquery slideUp() 和 slideDown() 为与不同面板交换的面板设置动画。我已经尝试了一些事情，例如使用属性修饰符和 AjaxLink 以及 prependJavascript 和 appendJavascript 的变体，但是我似乎无法让它工作。下面的代码很松散，这意味着我知道它在语法上不是 100% 正确的。我已将我的情况简化为一个更简单的示例，如下所示。

    Panel currentPanel = new Panel1("panelId");
    add(currentPanel );

    Link link = new Link("link")
    {
          public void onClick()
          {
              currentPanel = new Panel2("panelId")
              addOrReplace(currentPanel);
          }
    }
    link.add(new AttributeModifier("onclick", "$('#panel.getMarkup()').slideUp()");

我还研究了http://wicketinaction.com/2013/02/replace-components-with-animation/上的示例。我认为这个例子的问题是它正在为支持模型更改后正在刷新或替换自身的组件设置动画。我的情况有所不同，因为我正在用不同的组件更改整个组件。我还认为我需要先将要交换的组件设置为 display:none，这样 slideDown() 才能正常工作。

  public void onClick(AjaxRequestTarget target) {
       component.add(new DisplayNoneBehavior());

       target.prependJavaScript("notify|jQuery('#" + component.getMarkupId() + "').slideUp(1000, notify);");
       target.add(component);
       target.appendJavaScript("jQuery('#"+component.getMarkupId()+"').slideDown(1000);");
  }

  private static class DisplayNoneBehavior extends AttributeAppender {
         private DisplayNoneBehavior() {
              super("style", Model.of("display: none"));
         }

         @Override
         public boolean isTemporary(Component component) {
              return true;
         }
  }

感谢您在高级方面的任何帮助。如果有任何不清楚的地方，请告诉我，我会尽力澄清。

4

1 回答 1

2

浏览中的生命周期与您预期的不同。jQuery slideUp() 生效，然后在幻灯片效果完成后调用通知函数作为回调。但是，wicket 将所有 javascript 作为 AJAX 从服务器发送到专业浏览器，因此它会在幻灯片完成之前更改您的组件（HTML 标记）。

执行是

  1. prependJavaScript - 它启动 slideUp
  2. 渲染/替换组件
  3. appendJavaScript - slideDown
  4. 调用“通知”

如果我理解您的示例，则 notify 不是 JS 函数。

所以你必须使用JS回调，所以按照以下顺序编写你自己的JS事件：

  1. 调用 slideUp
  2. 从 slideUp 调用“notify()”函数
  3. notify() 必须回调检票口 AJAX
  4. 更换组件

有很多方法可以做到这一点。您可以尝试编写自己的 AjaxEventBehavior 来侦听自定义事件，例如“afterSliding”

并从 notify $('#myid').trigger('afterSliding'); 调用 调用该行为。您的行为必须从抽象的 onEvent() 方法中替换组件，并且您必须实现。

于 2013-06-20T21:34:03.133 回答