Wicket：用淡入和淡出替换面板（WiQuery、JQuery）
我有一个 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 应通过淡入出现。
但这就是问题所在！我应该怎么做，在 Ajax 替换后淡入 DIV？
您可以看到 target.appendJavascript() 调用，但这不起作用！
我需要 Wicket/WiQuery 的解决方案。我知道 jQuery 的解决方案，我想采用它们。
谢谢克里斯托夫
I have a DIV and want to show a listItem-Panel and if i click on the DIV the listItem-Panel should be replaces by a listItemDetail-Panel. For this reason, the DIV contains a Child-DIV with Wicket:ID=curPanel.
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() + "'))");
}
});
I use the AjaxCallDecorator to fadeOut the DIV (which contains the listItemPanel or listItemDetailPanel). After that, the Panel will be replaced by the other one and then the DIV should appear via fadeIn.
But this is the Problem! What should I do, to fadeIn the DIV after the Ajax-Replacement?
You can see the target.appendJavascript() call, but this did not work!
I need a solution for Wicket/WiQuery. I know the solution for jQuery and i want to adopt them.
Thx Christoph
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
使用 target.prependJavaScript()。这是在 DOM 替换之前执行的。而#appendJavaScript()在之后。
此外，1.5-RC5 Wicket 在其 Javascript 中支持 PubSub，并在 DOM 替换之前和之后分别发布“/dom/node/removing”和“/dom/node/added”通道的事件。
您可以订阅（使用 IHeaderResponse 将此 Javascript 添加到您的页面）：
Wicket.Event.subscribe(channelName);
其中“channelName”可以是上面的完全限定名称，也可以是“*”，它将侦听所有通道。
Use target.prependJavaScript(). This is executed before the DOM replacement. While #appendJavaScript() is after.
Additionally with 1.5-RC5 Wicket supports PubSub in its Javascript and it publishes an event for "/dom/node/removing" and "/dom/node/added" channels respectively before and after the DOM replacement.
You can subscribe with (use IHeaderResponse to add this Javascript to your page):
Wicket.Event.subscribe(channelName);
where 'channelName' is either fully qualified name as the ones above or '*' which will listen for all channels.