javascript - Wicket:用淡入和淡出替换面板(WiQuery、JQuery)

Question

我有一个 DIV，想要显示一个 listItem-Panel，如果我单击该 DIV，listItem-Panel 应该被 listItemDetail-Panel 替换。因此，DIV 包含一个带有 Wicket:ID=curPanel 的 Child-DIV。

    div.add(new AjaxEventBehavior("onclick") {
        @Override
        protected IAjaxCallDecorator getAjaxCallDecorator() {
            return new AjaxCallDecorator() {

                @Override
                public CharSequence decorateScript(final CharSequence script) {
                    return String.format("$('#%s').fadeOut(1000, function(){ %s });", div.getMarkupId(), script);
                }

            };
        }

        @Override
        protected void onEvent(final AjaxRequestTarget target) {
            final Panel curPanel = (Panel) div.get("curPanel");

            if (curPanel.getClass().equals(listItemDetailPanel.class)) {
                curPanel.replaceWith(listItemPanel);
            } else {
                curPanel.replaceWith(listItemDetailPanel);
            }

            target.addComponent(div);
            target.appendJavascript("new Effect.FadIn($('" + div.getMarkupId() + "'))");
        }
    });

我使用 AjaxCallDecorator 淡出 DIV(其中包含 listItemPanel 或 listItemDetailPanel)。之后，该面板将被另一个面板替换，然后 DIV 应通过 fadeIn 出现。

但这就是问题所在!我应该怎么做，在 Ajax-Replacement 之后淡入 DIV？

您可以看到 target.appendJavascript() 调用，但这不起作用!

我需要 Wicket/WiQuery 的解决方案。我知道 jQuery 的解决方案，并且我想采用它们。

谢谢克里斯托夫

Answer 1

使用target.prependJavaScript()。这是在 DOM 替换之前执行的。而#appendJavaScript()在之后。

此外，1.5-RC5 Wicket 在其 Javascript 中支持 PubSub，并且在 DOM 替换之前和之后分别为“/dom/node/removing”和“/dom/node/added” channel 发布事件。

您可以通过以下方式订阅(使用 IHeaderResponse 将此 Javascript 添加到您的页面):Wicket.Event.subscribe(channelName);

其中“channelName”可以是上面的完全限定名称，也可以是“*”，它将监听所有 channel 。